最近更新
阅读排行
关注本站

H5Web存储localStorage与sessionStorage

阅读:4223 次   编辑日期:2015-10-26

目录:

概述:

来到新公司之后开始着手H5站,在看以前代码的过程中发现在H5站中H5的localStorage用的非常多,今天我们就来聊聊HTML5的Web存储。
所谓的Web存储就是在客户端存储数据,一说到存储数据大小必然会想到COOKIE,但是COOKIE的大小为4k,并且需要HTTP请求会占用带宽,而H5的储存大小为5M左右,且不占用带宽。 现在主流浏览器都已支持Web存储,IE从IE8开始支持。
H5的Web存储有两种方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

localStorage 方法

localStorage储存不受时间与关闭浏览器限制,关闭浏览器N久之后依然会存在。
设置localStorage储存有两种方法:
    <script type="text/javascript">
        localStorage.name="uw3c";
        document.write(localStorage.name);
    </script>
    <script type="text/javascript">
        localStorage.setItem("name", "uw3c");
        document.write(localStorage.getItem("name"));
    </script>
删除localStorage储存的方法如下:
    <script type="text/javascript">
        localStorage.removeItem("name");//删除名称为“name”的信息。
        localStorage.clear();​//清空localStorage中所有信息
    </script>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当关闭浏览器窗口之后,数据会就没了。
设置sessionStorage储存的方法如下:
    <script type="text/javascript">
        sessionStorage.name="uw3c";
        document.write(sessionStorage.name);
    </script>
如果还是不明白,就点击下方的查看实例吧。
查看实例
将本篇文章分享到:
top