跳到主要内容

在客户端存储数据

无论是离线 Web 应用，还是提升用户体验，还是节省更多移动流量，很多 Web 应用都需要在本地存储数据，于是出现了很多的基于浏览器的本地存储解决方案。 Cookies 的优点是几乎所有浏览器都支持，但是 Cookies 的大小限制在 4KB 左右，并且 IE 6 只支持每个域名 20 个 cookies 。 HTML 5 提供了两种在客户端存储数据的新方法：

  • localStorage ：没有时间限制的数据存储
  • sessionStorage ：针对一个 session 的数据存储

在此之前，客户端存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML 5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

在 HTML 5 中，本地存储是 window 的一个属性，包括 localStorage 和 sessionStorage ， localStorage 是一直存在本地的， sessionStorage 只是伴随着 session ，窗口一旦关闭就没了。二者用法完全相同。

Web Storage 的优缺点​

优点

  • 存储空间：存储空间更大。 IE8 下每个独立的存储空间为 10M ，其它浏览器实现略有不同，但都比 Cookie 要大很多
  • 服务器：存储内容不会发送到服务器。当设置了 Cookie 后， Cookie 的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费，而 Web Storage 中的数据则仅仅存在于本地，不会与服务器发生任何交互
  • 接口：更多丰富易用的接口。 Web Storage 提供了一套更为丰富的接口，使得数据操作更为简便
  • 存储空间：独立的存储空间。每个域（包括子域）都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱

缺点

Web Storage 的缺点主要集中在其安全性方面，具体体现在以下两点：

  • 浏览器会为每个域分配独立的存储空间，即脚本在域 A 中是无法访问到域 B 中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同，即在域 B 中嵌入域 A 中的脚本依然可以访问域 B 中的数据
  • 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏