给HTML5的建议、HTML5的技巧和技术时讯联科｜时讯联科信息科技(4)_H5之家

Web 存储规范提供了与 HTTP session cookies 相似的稳健的 Web 存储属性。他们是”sessionStorage” 和”localStorage”。

sessionStorage 用以存储浏览最顶层环境生存周期内的数据。例如浏览器 Tab 的或窗口持续打开周期内的数据。

localStorage 用以存储周期较长、多页面，以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。

本地和 session 存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ and Opera 10.5+。

简单代码示例: 使用 localStorage 来创建页面计数器 (View Demo)

<p>You Have Viewed This Page <b> <script> if (!localStorage.pageCounter) localStorage.setItem('pageCounter',0); localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1); document.write(localStorage.pageCounter); </script> </b> Time(s).</p> <p><input value="Clear localStorage" type="button" /> <input value="Reload Page" type="button" /></p>

你也可以把上面的代码中所有的 localStorage 的实例替换成 sessionStorage 来测试 sessionStorage。你的计数器将会在你关闭 Tab 或窗口前正常工作。如果你重起浏览器，计数器将会重新计数 (View Demo) 。

了解更多:

学习 HTML5 Local Storage

JavaScript 解决方案:

更多____

除了已经讨论的内容外，还有更多你会想跟进了解的特性和相关的技术。这些是会帮助你研究的摘要列表：

网页版离线程序

HTML5 规范还定义了当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。这个特性现在被 Firefox 3.5+, Chrome 4.0+, Safari 4.0+ and Mobile Safari 3.1+ 所支持。

你可以通过提供一个 manifest 文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。当用户访问这个页面，支持的浏览器将会猎取一个 manifest 版本。它将下载并缓存所有的涉及到的文件，并且当 manifest 相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。

跨文档通讯

新的还提供了”postMessage” 让我们可以向不同域的页面发送消息。这个特性在所有现代浏览器中被支持：IE8+, Firefox3+, Safari 4+, Chrome 2+ and Safari 9.6+。

Safari Reference Library: 跨文档通信

Mozilla Developer Center: postMessage

用 className 访问 DOM 元素

我们在 Javascript 中最常见的事是选择 DOM 元素并动态地做一些事。我们大部分人在原生 Javascript 中使用 “getElementById” 来做这事。HTML5 规则已经添加了”” 方法，当我们要用 className 来访问元素的时候，这将会大大提升我们脚本的性能。这个特性在除IE 外的其他现代浏览器都支持，有Firefox3+, Safari 3.2+, Chrome 2+ 和 Safari 9.6+。

getElementsByClassName 速度对比

对 HTML5′s getElementsByClassName 的一些思考

更多的特性

官方规范文档：

给HTML5的建议、HTML5的技巧和技术 时讯联科｜时讯联科信息科技(4)

给HTML5的建议、HTML5的技巧和技术时讯联科｜时讯联科信息科技(4)