Web 数据存储

735 阅读2分钟

介绍:

在HTML5之前,本地存储的唯一方案是使用cookie,cookie也有不好的一面,那就是处理过期数据,而且要跟着请求来来回回的发送和接收这些没用的数据。
HTML5新增本地存储功能,在访客的计算机上保存数据,这些数据可以无限期的保存在用户计算机上,不会发送到服务器。web存储(Web Storage)特别适合开发离线应用。

web存储分为:

  1. 本地存储,对应localStorage对象,用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
  2. 会话存储,对应sessionStorage对象,用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。

存储范围:

无论本地存储还是会话存储,都是与网站所在的域联系在一起的。 你用不同的用户名登录自己的计算机,或者使用不同的浏览器,那么存取的也将是不同的本地存储数据。
尽管HTML5没有硬性规定存储空间的上限,但大多数浏览器都把本地存储限制为5MB以下。

没有Web服务器则不能使用Web存储:在很多浏览器中,只有从Web服务器上打开的页面能读写 Web 存储。无论这个Web服务器是远程的还是本地的-关键就是不能从本地硬盘打开页面。

通过localStorage和 sessionStorage保存数据时,该数据会自动被转换为文本字符串。

兼容性:

如果需要兼容IE7,可以用cookie来模拟Web存储。虽然不完美,但却可行。

数据处理

localStorage.setItem(keyName, data)  // 保存数据

localStorage.getItem(keyName)  // 读取数据
localStorage.keyName
localStorage[keyName]

localStorage.removeItem(keyName)  // 删除数据
sessionStorage.clear()  // 清空会话数据

响应存储变化

本地存储或会话存储发生变化时,其他查看同一页面或者同一站点中其他页面的 口就会触发window.onStorage事件。

window.addEventListener("storage", func, false);