谋智社区

原文地址：saving data with localStorage
系列地址：颠覆网络35天

====================================

本文作者为Jeff Balogh。Jeff就职于Mozilla的互联网开发团队。

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5中得到支持。localStorage提供了简单的 provides a simple Javascript API，用来在浏览器中持久化key-value键值对。应该注意的是不要同SQL数据库存储提案混淆，后者是另外单独的（同时也是有争议的） 互联网存储规范的一部分。键值对可以存储在cookie中，不过你一定不想这么做。Cookie在每次请求中都会被发送到服务器端，如果使用大数据集合的 话会有性能问题，同样也在传输中会有安全问题，而且也许你不得不为了处理这些数据特别写大量代码，例如把cookie像数据库那么使唤。

这里有一个简单演示，可以把textarea中的内容存储到localStorage。你可以改变文字，打开新标签页，可以看到更新过的内容。或者重启浏览器，你的文字还会在那里。

使用localStorage最简单的方式就是像一个正常对象那样的使唤他：

>>> localStorage.foo = ‘bar’
>>> localStorage.foo
“bar”
>>> localStorage.length
1
>>> localStorage[0]
“foo”
>>> localStorage[‘foo’]
“bar”
>>> delete localStorage[‘foo’]
>>> localStorage.length
0
>>> localStorage.not_set
null

如果喜欢使用函数的话，我们也有类似的API：

>>> localStorage.clear()
>>> localStorage.setItem(‘foo’, ‘bar’)
>>> localStorage.getItem(‘foo’)
“bar”
>>> localStorage.key(0)
“foo”
>>> localStorage.removeItem(‘foo’)
>>> localStorage.length
0

如果你希望有个localStorage数据库可以对应当前会话，你可以使用sessionStorage。他提供同localStorage一样的接口，但是sessionStorage的生命周期被限制在当前浏览器窗口。你可以在同一个浏览器窗口中点击链接浏览，sessionStorage一直会被保存（去不同的网站也可以），一旦该浏览器窗口被关闭，数据库就会被删除了。localStorage针对长期存储，像w3c中描述的，浏览器应该把这类数据当作是“潜在的用户关键”数据。

不过当我发现localStorage仅仅支持保存字符串时未免有些伤心，我希望能够保存一些结构化的数据。我们可以借助Firefox 3.5中原生的JSON支持，可以非常容易的利用localStorage保存结构化对象数据：

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

localStorage数据库作用域限定于HTML5源定义，基本上就是三元组(scheme, host, port)。换句话说，本地存储数据库在同样域名下的网页间是共享的，即便是在多个浏览器标签页中。不过，使用http://连接的页面是看不到使用https://连接会话中的数据库的。

localStorage 和 sessionStorage都在Firefox 3.5、Safari 4和IE8中得到支持。你可以在quirksmode.org找到更详细的兼容性信息，尤其是在保存事件的一节中。