【轉】本機存放區-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就不共用資訊了。

【轉】本機存放區-localStroage/sessionStorage儲存