[HTML5]localStorage、sessionStorage使用详解-建站笔记

HTML的本地存储，相当于一个超大型的cookie,可以通过浏览器存储相关的数据。

localStorage

持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

sessionStorage

本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，前者一直存在本地，后者只是伴随session，窗口一旦关闭就没了。二者的用法完全相同。

localStorage和sessionStorage的用法

判断浏览器是否支持localStorage

if(window.localStorage)
{ 
alert("支持localStorage");
}else
{ 
alert("不支持localStorage");
}

或者

if(typeof window.localStorage == 'undefined')
{ 
alert("浏览暂不支持localStorage");
}

三种设置本地存储的方法

localStorage.a="php";
localStorage["b"]="html5";
localStorage.setItem("c","JQuery");

三种访问本地存储的方法

localStorage.a;
localStorage["b"];
localStorage.getItem("c");

其他扩展

localStorage.removeItem();    //清除
localStorage.clear(); //清除所有
localStorage.length;  //获得多少键
localStorage.key; //获得存储的键内容
localStorage.getItem(localStorage.key(0))

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 localStorage、sessionStorage</title>
</head>
<body>
    <input type='button' onclick='set_item()' value='存值'　/>
    <input type='button' onclick='get_item()' value='取值'　/>
    <input type='button' onclick='delete_item()' value='删除'　/>
    <script>
    //localStorage 存值永久有效
    function set_item(){
    var user = {};
     user.name = 'Adam Li';
     user.age  = 25;
     user.home = 'China';
    localStorage.setItem('userinfo',JSON.stringify(user));
    }
    //localStorage取值
    function get_item(){
    var data = JSON.parse(localStorage.getItem('userinfo'));
    alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home);
    }
    //localStorage删除指定键对应的值
    function delete_item(){
    localStorage.removeItem('userinfo');
    alert(localStorage.getItem('userinfo'));
    }
    </script>  
</body>
</html>

总结

sessionStorage使用方法请参照localStorage使用示例，只需要把local换成session就可以了。实际应用要用哪个关键看你需求了，如果是要永久保存的，那么就请使用localStorage方法存取值，如果是要浏览关闭会话结束就清除缓存的，当然就得选择sessionStorage方法了

[HTML5]localStorage、sessionStorage使用详解