H5-localStorage、sessionStorage使用方法

HTML5提供了在客户端存储数据的新方法，除IE7及以下不支持外，其他浏览器均支持。

简述：

localStorage - 没有时间限制的数据存储，只要用户不手动清除将会一直保留在本地；

sessionStorage - session会话期间的数据存储，关掉浏览器即被清除；

localStorage和sessionStorage都有以下几个方法：

1.存储数据

localStorage.setItem("key", "value");//key为存储数据名，类似与var name="夏尔"中的name类似。

或 localStorage.key="value";//类似于对象的操作方法

2.删除单个指定数据

localStorage.removeItem("key");

3.删除全部数据

localStorage.clear();

.想要改动某个存储的数据，直接用setItem覆写要改动的数据名下的数据就可以

4.获取本地存储的数据-查

var value=localStorage.getItem("key");//value即为所存的值

5.key()和length实现存储数据的遍历

具体使用方法参考下面的DEMO：

[html]view plain copy
<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8" />  
        <title>H5-localStorage使用</title>  
    </head>  
  
    <body>  
        <button id="set">设置缓存</button>  
        <button id="clear">清除缓存1</button>  
        <button id="clearAll">清除全部</button>  
        <button id="func">打印当前数据</button>  
    </body>  
    <script>  
        window.onload = function() {  
            var data1 = "{name:\"夏尔\"}";//localStorage存储的数据必须使用双引号，采用反斜杠转义，否则JSON.parse()解析时会报错！  
            var data2 = "[\"数组数据1\",2]";  
            var oSetBtn = document.getElementById("set");  
            var oClearBtn = document.getElementById("clear");  
            var oClearAllBtn = document.getElementById("clearAll");  
            var oBtn = document.getElementById("func");  
            oSetBtn.onclick = function() {  
                localStorage.setItem("item1", data1); //存储数据  
                localStorage.setItem("item2", data2);  
            }  
            oClearBtn.onclick = function() {  
                localStorage.removeItem("item1", data1); //删除指定数据  
            }  
            oClearAllBtn.onclick = function() {  
                localStorage.clear(); //删除全部数据  
            }  
  
            //key()方法和length属性实现数据遍历  
            oBtn.onclick = function() {  
                var stroage = window.localStorage;  
                var len = stroage.length;  
                if(len == 0) return "没有缓存数据";  
  
                for(var i = 0; i < len; i++) {  
                    console.log(stroage.key(i)); //打印的项目名称  
                    console.log(stroage.getItem(stroage.key(i)));  
                }  
            }  
        }  
    </script>  
  
</html>  