html5-数据存储

1.Cookie

          Cookie是html存储最基本的方式，他是一种存储在访问者计算机中的变量。以字符串的形式存储在计算机文件中。每当我们浏览某个网页时，都会向服务器后台发送这个cookie.

          Cookie有大小限制，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

          使用Cookie时需要为他设置有效期，如果不设置，在关闭浏览器的时候，cookie就会消失。

     通过JS存储Cookies:  

　document.cookie  = 'username=Darren'

           以上代码中'username'表示 cookie 名称，'Darren'表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。

            cookies封装函数（包括设置时间）：

 　function setCookie(c_name, value, expiredays){
2 　　　　var exdate=new Date();
3 　　　　exdate.setDate(exdate.getDate() + expiredays);
4 　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
5 　　}
6 　　使用方法：setCookie('username','Darren',30)  

  由于cookie的种种限制，所以在html5种出现了两种新的存储方式，他们能够存储更大的信息，而且使用起来较简单。

2.sessionStorage

            将数据保存再session对象中。session就是指用户在浏览某个网站时，从进入网站到浏览器关闭的这段时间。 session可以保存在这段时间内所需要保存的任何数据。当该页面关闭之后，数据将消失。

            使用方法：

             在js中直接使用sessionStorage.setItem方法来设置需要保存的键值对，获取时通过键来寻找就可以了。

/**
 * 保存sessionStorage
 * @param id
 */
function saveStorage(id){
    var target=document.getElementById(id);
    var value=target.value;
    sessionStorage.setItem("msg",value);
}
/**
 * 加载sessionSttorage
 * @param id
 */
function loadStorage(id){
    var target=document.getElementById(id);
    var value=sessionStorage.getItem("msg");
    target.innerHTML=value;
}

3.localStorage：

            将数据保存再客户端bending的硬件设备中，即使浏览器关闭，数据仍然保存（长期存储）

             使用方法和sessionStorage类似,只需要将sessionStorage方法替换成localStorage即可

 

/**
 * 保存localStorage
 * @param id
 */
function saveStorage(id){
    var target=document.getElementById(id);
    var value=target.value;
    localStorage.setItem("msg",value);
}
/**
 * 加载sessionSttorage
 * @param id
 */
function loadStorage(id){
    var target=document.getElementById(id);
    var value=localStorage.getItem("msg");
    target.innerHTML=value;
}

          sessionStorage和localStorage底层都是通过cookie来实现的。