Html5 的 WebStorage 本地存储

Html5支持两种的WebStorage，一种是永久性的本地存储（localStorage），另外一种是会话级别的本地存储（sessionStorage）。

 

1 会话级别的本地存储：sessionStorage

在Html5中增加了一个Js对象：sessionStorage；通过此对象可以直接操作存储在浏览器中的会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，另外就是它跟浏览器当前会话相关，当会话结束后，数据会自动清除，跟未设置过期时间的Cookie类似。

sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

• （1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
• （2）getItem(key):通过key获取相应的Value。
• （3）removeItem(key):通过key删除本地数据。
• （4）clear():清空数据。

    <script type="text/javascript">
        //添加key-value 数据到 sessionStorage
        sessionStorage.setItem("demokey", "http://blog.itjeek.com");
        //通过key来获取value
        var dt = sessionStorage.getItem("demokey");
        alert(dt);
        //清空所有的key-value数据。
        //sessionStorage.clear();
        alert(sessionStorage.length);
    </script>


对于JS的学习和调试必须得有Chrome的调试工具辅助才能事半功倍。当然Chrome也是我最喜爱的Web开发辅助工具，非常简单F12快捷键就立即打开工具了，包括IE也是这个快捷键。通过下图就可以查看当前浏览器中的sessionStorage数据。

2 永久本地存储：localStorage

在最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB.所以，这完全是颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法，当然基本上跟sessionStorage是一致的。

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

• （1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
• （2）getItem(key):通过key获取相应的Value。
• （3）removeItem(key):通过key删除本地数据。
• （4）clear():清空数据。

                            
    <script type="text/javascript">
        //添加key-value 数据到 sessionStorage
        localStorage.setItem("demokey", "http://blog.itjeek.com");
        //通过key来获取value
        var dt = localStorage.getItem("demokey");
        alert(dt);
        //清空所有的key-value数据。
        //localStorage.clear();
        alert(localStorage.length);
    </script>

同样你也可以通过chrome来查看数据 

           

 

  最后，用WebStorage存储的数据都是string格式的，如果你是数组的话，

　　先使用JSON.stringify()函数把数组转换为字符串，

　　拿出来的时候使用JSON.parse()把字符串转换会数组。

不然 显示的就“array()”