HTML 5 Web 存储

HTML 5 Web 存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

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

以前，这些都是由 cookie 完成的。可是 cookie 不适合大量数据的存储，由于它们由每一个对服务器的请求来传递，这使得 cookie 速度很慢并且效率也不高。

在 HTML5 中，数据不是由每一个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的状况下存储大量数据成为可能。

对于不一样的网站，数据存储于不一样的区域，而且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。次日、第二周或下一年以后，数据依然可用。

如何建立和访问 localStorage：

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何建立并访问一个 sessionStorage：

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

很是通俗易懂的接口:

• sessionStorage.getItem(key):获取指定key本地存储的值
• sessionStorage.setItem(key,value)：将value存储到key字段
• sessionStorage.removeItem(key):删除指定key本地存储的值
• sessionStorage.length是sessionStorage的项目数

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不一样的地方， sessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后从新打开这个页面时，以前的存储已经被清除。而 localStorage 是一个持久化的存储，它并不局限于会话。

sessionStorage和localStorage提供的key()和length能够方便的实现存储的数据遍历，例以下面的代码：

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++)
{
   var key = storage.key(i); 
   var value = storage.getItem(key); 
   console.log(key + "=" + value);
 }

 

 sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据，好比localStorage.clear()，它将删除全部同源的本地存储的localStorage数据，而对于Session Storage，它只清空当前会话存储的数据。 关闭页面会致使 sessionStorage 的数据被清除，但刷新或从新打开新页面数据仍是存在，若是须要存储的只是少许的临时数据。咱们可使用sessionStorage 。或者作页面间的小交互。 sessionStorage 和 localStorage具备相同的方法storage事件，在存储事件的处理函数中是不能取消这个存储动做的。存储事件只是浏览器在数据变化发生以后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用，而且数据真的发生了改变时，storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说，若是当前的存储区域是空的，你再去调用clear()是不会触发事件的。或者你经过setItem()来设置一个与现有值相同的值，事件也是不会触发的。当存储区域发生改变时就会被触发，这其中包含许多有用的属性：

• storageArea: 表示存储类型（Session或Local）
• key:发生改变项的key
• oldValue: key的原值
• newValue: key的新值
• url*: key改变发生的URL

* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变动。为兼容性考虑，使用url属性前，你应该先检查它是否存在，若是没有url属性，则应该使用uri属性
若是调用clear()方法，那么key、oldValue和newValue都会被设置为null。
PS.在firefox和chrome中存储和读取都是正常的, 可是对storage事件的触发彷佛有点问题, 自身页面进行setItem后没有触发window的storage事件, 可是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 一样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,一样当前页面的设值能触发同一”起源”下其余页面window的storage事件,这看起来彷佛更让人想的通些.

Cookie

Cookie意为“甜饼”，是由W3C组织提出，最先由Netscape社区发展的一种机制。目前Cookie已经成为标准，全部的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。

因为HTTP是一种无状态的协议，服务器单从网络链接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，不管谁访问都必须携带本身通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工做原理。

会话（Session）跟踪是Web程序中经常使用的技术，用来跟踪用户的整个会话。经常使用的会话跟踪技术是Cookie与Session。Cookie经过在客户端记录信息肯定用户身份，Session经过在服务器端记录信息肯定用户身份。

Cookie是保存在浏览器端的，所以浏览器具备操做Cookie的先决条件。浏览器可使用脚本程序如JavaScript或者VBScript等操做Cookie。这里以JavaScript为例介绍经常使用的Cookie操做。例以下面的代码会输出本页面全部的Cookie。

<script>document.write(document.cookie);</script>

 

注意：从客户端读取Cookie时，包括maxAge在内的其余属性都是不可读的，也不会被提交。浏览器提交Cookie时只会提交name与value属性。maxAge属性只被浏览器用来判断Cookie是否过时。