HTML5本地存储示例

Html5允许web应用程序在本地存储数据,就像cookies。和cookies不一样的是,本地存储不需要每次发送HTTP请求,因此不会影响网站性能。本地存储的数据不会传送到服务器。

另外,cookies只能为每个网站存储4K数据,而本地存储(Local Storage)可以达到5M,并且提供简单的key-value存储格式。它有两种存储形式:

  1. Session Storage:为一个浏览器会话存储数据,数据有效时间浏览器/浏览器标签关闭。多个浏览器标签之间存储的数据(即使是同一个网站)相互不可见。
  2. Local Storage:存储的数据没有过期时间,即使浏览器关闭。同一个网站,浏览器标签之间存储的数据相互可见。

本地存储支持的浏览器:

  • Internet Explorer 8+
  • Firefox
  • Chrome
  • Safari
  • Opera

注意:存储的本地数据在浏览器之间并不共享。

本地存储示例

CheckBrowserStorage()函数判断浏览器是否支持HTML5存储。有几种方法可以实现,我使用默认的api检测浏览器的兼容性。另外,也可以使用开源的库Modernizr

全部代码:

结果:

Screen Shot 2016-02-28 at 14.58.06

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注