MJiA

原文地址：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找到更详细的兼容性信息，尤其是在保存事件的一节中。

原文地址：new CSS3 properties in Firefox 3.5 - nth-*
系列地址：颠覆网络35天

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

Firefox 3.5支持一些全新的CSS3选取器。在这篇文章中，我们会介绍其中的四个：:nth-child，:nth-last-child，:nth-of-type 和 :nth-last-of-type。

这些选取器也被称作伪类，可以为已有的选取器增加风格。我们来看一些实际的例子。

:nth-child

这个伪类允许为一组元素添加风格。最常见的例子就是在表格中隔行高亮数据单元格：

tr:nth-child(even)
{
    background-color: #E8E8E8;
}

实际的例子（需要Firefox 3.5）：

还可以使用特殊的标记来为超过两组元素添加风格。文档中对规则的描述不太准确，但是在例子中的“3”把元素分为三组，“+1”则是在组中的偏移量。在规范中还有很多例子。

tr:nth-child(3n+1) {  background-color: red; }
tr:nth-child(3n+2) {  background-color: green; }
tr:nth-child(3n+3) {  background-color: blue; }

实际的例子（需要Firefox 3.5）：

:nth-last-child

:nth-last-child伪类同:nth-child的工作方式非常相似，不过他是从后向前数子节点：

tr:nth-last-child(3n+3) {  background-color: red; }
tr:nth-last-child(3n+2) {  background-color: green; }
tr:nth-last-child(3n+1) {  background-color: blue; }

例子（需要Firefox 3.5）：

:nth-of-type

:nth-of-type伪类使用跟其他伪类类似的语法，但是允许你根据元素类型进行选取。

div:nth-of-type(odd) { border-color: red }
div:nth-of-type(even) { border-color: blue }

例子（需要Firefox 3.5）：

:nth-last-of-type

:nth-last-of-type同:nth-of-type功能类似，不过也是从后向前查子节点。