【轉】本地存儲-localStroage/sessionStorage存儲

原文地址：【js學習筆記-103】----本地存儲-localStroage/sessionStorage存儲

客戶端存儲

l  WEB存儲

      web存儲最初做爲html5的一部分被定義成API形式，可是後來被剝離出來做爲獨立的一份標準。該標準目前還在草案階段，但其中一部份內容已經被包括IE8在內的全部主流瀏覽器實現了。Web存儲標準所描述的API包含localStorage對象和sessionStorage對象,這兩個對象其實是持久化關聯數組，是名值對的映射表。名值都是字符串。

l  cookie

        是一種早期的客戶端存儲機制，起初是針對服務器端腳本使用的。儘管在客戶端提供了很是繁瑣的js api來操做cookie，但它們難用至極，並且只適合存儲少許文本數據。不只如此，任何以cookie形式存儲的數據，不論服務器端是否須要，每一次http請求都會把這些數據傳輸到服務器端。cookie目前仍然被客戶端程序員大量使用的一個重要緣由是：全部新舊瀏覽器都支持它，可是，隨着web storage的普及，cookie終將會迴歸到最初的形態:做爲一種被服務端腳本使用的客戶端存儲機制。

l  IE User Data

            IE5及以後的IE瀏覽器中實現了它專屬的客戶端存儲機制-----「userData」。userData能夠實現必定量的字符串數據存儲，對於IE8之前的IE瀏覽器中，能夠將其用作是web存儲的替代方案。

l  離線Web應用

             HTML5標準定義了一級「離線web應用」API，用以緩存Web頁面以及相關資源。它實現的是將web應用總體存儲在客戶端，而不只僅是存儲數據。它可以讓web應用「安裝」在客戶端，這樣一來，哪怕網絡不可用的時候web應用依然是可通知的。

l  web數據庫

             爲了可以讓開發者像使用數據庫那樣來操做大量數據，不少主流的瀏覽器紛紛在其中開始集成客戶端數據庫的功能。safari,chrome和opera都內置了sql數據庫的客戶端api。遺憾的是，這類API的標準化工做以失失敗。而且IE和Firefox看樣子也都不打算實現這種API。目前還有一種正在標準化的數據庫API，稱爲「索引數據庫API」。調用該API返回的是一個不包含查詢語言的簡單數據庫對象。這兩種客戶端數據庫Api都是異步的，都使用了事件處理機制。

l  文件系統API

             以前介紹過如今主流瀏覽器都支持一個文件對象，用以將選擇的文件經過XMLHttpRequest上傳到服務端。與之相關的規範定義了一級API，用於操做一個私有的本地文件系統。在該文件系統中能夠進行對方的讀寫操做。這些內容正在緊鑼密鼓標準化當中，隨着這些api被普遍地實現和支持，web應用可使用相似基於文件的存儲機制。

localStorage和sessionStorage

這兩個屬性表明同一個Storage對象即一個持久化關聯數組，數組使用字符串來索引，存儲的值也都是字符串形式的。Storage對象在使用上和通常的javascript對象沒什麼區別：設置對象的屬性爲字符串值，隨後瀏覽器會將該值存儲起來。

localStorage和sessionStorage二者的區別在於存儲的有效期和做用域不一樣：數據能夠存儲多長時間以及誰擁有數據的訪問權。

經過localStorage存儲的數據是永久性的，除非web應用刻意刪除存儲的數據，或者用戶經過設置瀏覽器配置來刪除，不然數據將一直保留在用戶的電腦上，永不過時。localStorage的做用域是限定在文檔源級別的。文檔源是經過協議、主機名端口三者來肯定的。同源的文檔共享一樣的localStorage數據。它們能夠互相讀取對方的數據，甚至能夠覆蓋對方的數據（即便它們運行的腳本是來自同一臺第三方服務器也不行）。注意：localStorage的做用域也受瀏覽器供應商的限制。若是使用firefox訪問站點，那麼下次用另外一個瀏覽器再次訪問的時候，那麼本次是沒法獲取上次存儲的數據。

 

sessionStorage存儲的數據，一旦窗口或者標籤頁被永久關閉了，那麼全部經過sessionStorage存儲的數據也都被刪除了。（固然要瀏覽的是，現代瀏覽器已經具有了從新打開最近關閉的標籤頁隨後恢復上一次瀏覽的會話功能，所以，這些標籤頁以及與之相關的sessionStorage的有效期可能會更加長些）。它的做用域也是限定在窗口中，若是同源的文檔渲染在不一樣的瀏覽標籤頁中，那麼它們互相之間擁有的是各自的sessionStorage數據，沒法共享；一個標籤頁中的腳本是沒法讀取或覆蓋另外一個標籤頁腳本寫入的數據。哪怕這兩個標籤渲染的是同一個頁面，運行的是同一個腳本。

存儲API

一般是用作javascript對象使用：經過設置屬性來存儲字符串值，查詢該屬性來讀取值。除此以外，這兩個對象還提供了更加正式的API。

     setItem(「名」,」值」); //設置

     getItem(「名」); //讀取存儲

     removeItem(「名」); //刪除對應的數據 （在非IE8還可用delete操做符來刪除數據）

     clear(); //清除全部存儲的數據

      length屬性及key()方法，傳入0~length-1的數字，能夠枚舉全部存儲數據的名字   如：

       for(vari=0;i<localStorage.length;i++){

            var name = localStorage.key(i);

            var value = localStorage.getItem(name);

       }

 

var memory =window.localStorage || (window.UserDataStorage && new UserDataStorage()) || new cookieStroage();

var userName =memory.getIem(「uername」);

 

存儲事件storage

不管何時存儲在localStorage或者sessionStorage的數據發生改變，瀏覽器都會在其餘對該數據可見的窗口對象上觸發存儲事件（可是，在對數據進行改變的窗口對象上是不會觸發的）若是瀏覽器有兩個標籤頁面都打開來自同源的頁面，其中一個頁面在localStorage上存儲了數據，那麼另一個標籤頁就會接收到一個存儲事件。sessionStorage的做用域是限制在頂層窗口的，所以對sessionStorage的改變只有當有相牽連的窗口的時候纔會觸發存儲事件。還要注意，只有當存儲數據真正發生改變的時候纔會觸發存儲事件。像給已經存在的存儲項設置一個如出一轍的值，抑或是刪除一個原本就不存在的存儲項都是不會觸發存儲事件的。

爲了存儲事件註冊處理程序能夠經過addEventListener()方法或attachEvent()方法。在絕大多數瀏覽器中，還可使用window對象設置onstorage屬性的方式，不Firefox不支持。

與存儲事件相關的事件對象有5個很是重要的屬性（遺憾的是，IE8不支持它！！！）

l  key：被設置或者移除的項的名字或鍵名。若是調用的是clear()函數，那麼該屬性值爲null

l  newValue:保存該項的新值；或者調用removeItem()時，該屬性值爲null。

l  oldValue:改變或者刪除該項，保存該項原先的值；當插入一個新項的時候，該屬性值爲null。

l  storageArea:這個屬性值就比如是目標Window對象上的localStroage屬性或是sessionStorage屬性

l  url:觸發該存儲變化腳本所在的文檔的URL

注意：localStroage和存儲事件是採用廣播機制的，瀏覽器會對目前正在訪問的一樣的站點的全部窗口發送消息。

 

若是頁面中的a標籤是經過js的window.open打開的另外一個標籤頁，那麼sessionStorage和前一個標籤頁的是同樣的。若是是用瀏覽器的右鍵「在新的標籤頁中打開」那麼sessionStorage和前一個標籤頁是不要緊的。可是不論是以何種方式打開的，以後的兩個標籤頁之間的sessionStorage就不共享信息了。