HTML的局部存储比cookies更好.

HTML的局部存储是什么?

用局部存储,网页应用可以把数据存储到浏览器的本地.

在HTML5之前,网页数据不得不保存在cookies里,包括每个服务器请求.局部存储更安全,并且局部存储可以存大量的数据,还不影响浏览器的执行性能.

不像cookies,局部存储的存储量很大(至少5MB)并且信息从不发送给服务器.

局部存储是分源的(分域名和协议).所有的页面,都得是来自一个源,才能存储和访问同样的数据.

HTML 局部存储对象

HTML局部存储提供了两个对象在客户端存储数据:

• window.localStorage - 存储的数据没有时间限制
• window.sessionStorage - 存储的数据是在一个会话里(当浏览器的tab关闭时数据会丢失)

在用局部存储之前,检测浏览器是否支持localStorage和sessionStorage:

localStorage对象

localStorage存储的数据没有时间期限.当浏览器关闭时数据不会被删除,并且一天,一周或一年后数据依旧可用.

例子解释:

• 创建了一个局部存储键值对name="小明"
• 取出name的值,并把值显示在id="result"元素里

上面的例子也可以写成下面这样:

删除局部存储中的"name"语法是:

注意:存储的键值对是使用字符串.记住需要的时候可以把它们转换为另一种格式!

下面的例子是统计用户点击了按钮多少次.

在代码里值是字符串,然后被转换为了能自增的数字:

sessionStorage对象

sessionStorage对象和localStorage对象是一样的,除了sessionStorage对象存储的数据只属于一个会话.当用户关闭浏览器的TAB选项数据将会被删除.

下面的例子在当前会话中统计用户单击了多少次按钮: