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是否過時。