H5新增API-显示、存储

首先，看一段调用全屏、退出全屏的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button type="button" name="button">全屏</button>
    <button type="button" name="button">退出全屏</button>
</body>
<script type="text/javascript">
document.querySelectorAll("button")[0].onclick = function(){
    console.log(document.body.requestFullscreen)
    document.body.webkitRequestFullScreen();
}
document.querySelectorAll("button")[1].onclick = function(){
    document.webkitCancelFullScreen();
}
    
</script>
</html>

h5新增的visibilitychange可以判断页面当前是否是显示状态。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button type="button" name="button">全屏</button>
    <button type="button" name="button">退出全屏</button>
</body>
<script type="text/javascript">
console.log(document.visibilityState);
document.addEventListener("visibilitychange",function(){
    console.log(document.visibilityState);
    console.log(document.hidden);
})
</script>
</html>

存储

分为本地存储 localStorage和会话存储sessionStorage，在一定程度上解决了cookie的不便利性。存储上限5M。
存储模式：键值对，API灵活。
cookie只能存储4kb，api不方便，都是document.cookie，操作的一长串字符串，需要自己分割，会被强制发送到服务器。
localStorage除非手动清除，否则永久存在，没有超时时间。
sessionStorage是只会在绘画期间有效，localStorage永久有效。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
<script type="text/javascript">
var obj ={age:12,address:"北京"};
console.log(localStorage);
localStorage.setItem("user","admin");
localStorage.setItem("desc",JSON.stringify(obj));
console.log(localStorage.getItem("user"));
console.log(JSON.parse(localStorage.getItem("desc")));
localStorage.setItem("user","admin");

localStorage.removeItem("user");
</script>
</html>

位置

geolocation是有关用户隐私的API，需要得到用户的同意才能有效。
为了安全限定，要求正式网站必须使用https协议。
自行测试使用localhost 访问（注：IP地址不可）
服务器不稳定。
在手机上访问稳定性和精确度会高很多。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
<script type="text/javascript">
console.log(navigator)
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(coords){
        console.log(coords)
    },function(err){

    });
}
</script>
</html>

navigator.geolocation.getCurrentPosition(successCallback,errorCallback[,options])
successCallback 成功回调函数
errorCallback 失败回调函数

H5新增API-显示、存储

存储

位置

推荐阅读更多精彩内容