Html 5 新特性之本地存储

在HTML5中对本地离线存储有了更好的支持,它提供了两种在客户端存储数据的新方法,即localStorage和sessionStorage

localStorage

localStorage是没有时间限制的数据存储

使用方式:

1
2
3
4
5
6
7
8

<script type="text/javascript">
    if (localStorage.pagecount) {
        localStorage.pagecount = Number(localStorage.pagecount) + 1;
    } else {
        localStorage.pagecount = 1;
    }
    document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>

刷新页面,数字增长。就算关闭浏览器窗口,再打开,数字还是在继续增长,而没有回到1。

删除存储的数据代码:

1

localStorage.removeItem("pagecount");

sessionStorage

sessionStorage是针对一个 session 的数据存储

使用方式:

1
2
3
4
5
6
7
8

<script type="text/javascript">
    if (sessionStorage.pagecount) {
        sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
    } else {
        sessionStorage.pagecount = 1;
    }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>

刷新页面,数字增长。当关闭浏览器窗口,再打开,数字回到初始值1。

Github参考代码
W3C school的HTML5教程