HTML5

1、document.hidden

　　支持page visibility的浏览器在document上添加一个hidden属性（不同浏览器可能需要前缀，如webkitHidden），看当前tab页是否激活，激活（focus）时document.hidden属性是false，否则是true。

　　document还会添加一个visibilityState属性，该属性有4个可能值，分别如下：

　　hidden：当浏览器最小化、切换tab（the page is on a background tab）、电脑锁屏时visibilityState值是hidden

　　visible：当浏览器顶级context（top level browsing context）的document至少显示在一个屏幕（screen）当中时，返回visible；当浏览器窗口没有最小化，但是浏览器被其他应用遮挡时，visibilityState值也是visible

　　prerender：文档加载离屏（is loaded off-screen）或者不可见时返回prerender，浏览器可选择性的支持这个属性（not all browsers will necessarily support it）

　　unloaded：当文档（document）将要被unload时返回unloaded，浏览器可选择性的支持这个属性

　　此外就是事件支持，document上会添加visibilitychange事件，当UA的顶级document可见性（visibility）改变时触发

　　兼容浏览器

 var hidden, state, visibilityChange; 
 if (typeof document.hidden !== "undefined") {
 hidden = "hidden";
 visibilityChange = "visibilitychange";
 state = "visibilityState";
 } else if (typeof document.mozHidden !== "undefined") {
 hidden = "mozHidden";
 visibilityChange = "mozvisibilitychange";
 state = "mozVisibilityState";
 } else if (typeof document.msHidden !== "undefined") {
 hidden = "msHidden";
 visibilityChange = "msvisibilitychange";
 state = "msVisibilityState";
 } else if (typeof document.webkitHidden !== "undefined") {
 hidden = "webkitHidden";
 visibilityChange = "webkitvisibilitychange";
 state = "webkitVisibilityState";
 }
 // Add a listener that constantly changes the title
 document.addEventListener(visibilityChange, function() {
 console.ifo(document.hidden);
 }, false);

　　2、html5 web存储

　　localStorage：存储的数据没有时间限制

　　　　设置

　　　　 window.localStorage.name="3";

　　　　window.localStorage["name"]="3";

　　　　window.localStorage.setItem("name","xiao.geng");

　　读取

　　　　window.localStorage.name

　　　　window.localStorage["name"]

　　　　window.localStorage.getItem("name")

　  推荐使用getItem和setItem方法

　　清除

　　　　window.localStorage.removeItem("name")   //移除key为name

　　　　window.localStorage.clear()//移除所有的

　　取key

　　　　window.localStorage.key(i);

　　　　HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。

　　　　另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

　　　　HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下：

　　 if(window.addEventListener){
　　　　 window.addEventListener("storage",handle_storage,false);
　　}else if(window.attachEvent){
　　 window.attachEvent("onstorage",handle_storage);
　　}
　　function handle_storage(e){
　　 if(!e){e=window.event;}
　　 //showStorage();
　　}

 

　　sessionStorage 

　　　　针对一个 session 的数据存储，任何一个页面存储的信息在窗口中同一网站的任何页面都可以访问它存储的数据。每个窗口的值都是独立的，它的数据会因窗口的关闭而丢失，不同窗口间的sessionStorage是不可以共享的。

　　3、history

　　（1） history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会忽略此参数；url为页面地址，可选，缺省为当前页地址； 
　　（2） history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上； 
　　（3） history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样； 
　　（4）window.onpopstate：响应pushState或replaceState的调用