弥补Web开发缺陷实战 HTML5 中存储API

测试积点老人

COOKIES的限制和缺陷

首先，让我们来回顾下 cookies。Cookies 的出现可谓大大推动了Web的发展，但它既有优点也有一定的缺陷。Cookies 的优点在于，它可以允许我们在登陆网站时，记住我们输入的用户名和密码，这样在下一次登陆时就不需要再次输入了，达到自动登陆的效果。

另一方面，cookie 的安全问题也日趋受到关注，比如 cookie 由于存储在客户端浏览器中，很容易受到黑客的窃取，安全机制并不是十分好。

另外一个问题是 cookies 存储数据的能力有限。目前在很多浏览器中规定每个 cookie 只能存储不超过 4KB 的限制，这估计是来自

1997 年 rfc2109 中的规定。目前的浏览器大多允许用户创建 30 到 50 个 cookies ，所以一旦 cookie 的内容超过4KB，唯一的方法是重新创建。

此外，cookie 的一个缺陷是每次的HTTP请求中都必须附带cookie，这将有可能增加网络的负载。

HTML5中的Web存储

在 HTML5 中新出现的 Web 存储机制正好弥补了 cookies 的缺点，Web存储机制在以下两方面作了加强：

首先，对于 web 开发者来说，它提供了很容易使用的 API 接口，通过设置键值对即可使用，下文中会有例子谈到。

其次，在存储的容量方面，可以根据用户分配的磁盘配额进行存储，这就可以在每个用户域下存储不少于5-10MB的内容。这就意味者，用户可以不仅仅存储 session 了，还可以在客户端存储用户的设置偏好，本地化的数据，离线的数据，这对提高效率是很有帮助的。

而web存储更提供了使用 Javascript 编程的接口，这将使得开发者可以使用 Javascript ，在客户端做很多以前要在服务端才能完成的工作。目前，各主流浏览器已经开始对 web 存储的支持，如下图：

Session存储和本地化存储

在 HTML5 的 web 存储中，分为 session 存储和本地化存储两类。

sesssion 存储只能针对单一的浏览器进程或单一页面的数据，换句话说，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

而 localStorage 则是可以不受浏览器窗口进程的限制，只要使用 localStorage 保存了的数据，即使在新打开了浏览器窗口或者将浏览器关闭后，数据依然保存。网站在页面加载完毕后可以通过 Javascript 来获取这些数据。

要注意的是,以上两类 web 存储机制，在不同类型的浏览器之中还是不能互相访问的，比如在 Firefox 中用 localstorage 存储的时候，是不能在IE中去访问读取的。

何时去使用它们

使用 localStorage 存储机制的场合是十分多的，比如你的应用中是一个在线的任务应用，需要用户在线填写大量的表单和数据，而且在指定的时间间隔后，才把这些数据发送到服务端，又或者是在线购物时，用户的购物车(这时可以在购物车中保存更多的数据了，等用户下次再登陆时，购物车中的数据依然是存在的)。又或者开发的离线应用，用户在离线状态下把数据填写好，等在线的时候，再一次性把数据提交。

除此之外，更有研究表明，可以使用 localStorage 去存储图片等二进制数据(图片需要经过Base64编码)，其效率大为提高8

那么什么时候需要使用 sessionStorage 呢?在有些情况下，如果你需要当浏览器窗口关闭或者不需要数据在当用户新打开一个窗口依然能被访问的情况下，可以使用 sessionStorage。比如在运行某个游戏的两个实例或者在运行多个单元测试时，不希望数据之间有冲突，这时可以使用 sessionStorage。