JavaScript使用localStorage儲存資料

【相關推薦：、】

背景

以前js都是 Session 和 Cookie 來儲存資訊，彷彿我還停留在那個時候，一問同事有沒有新的solution，才知道現在已經有 HTML5 localStorage 本地儲存 這個東西，可以在瀏覽器端儲存資料。

記得最早的Cookies只能存很小的東西，4KB的樣子，並且安全性很差，在IE6時代一個域名也只能二十個Cookies吧，限制挺大，當然IE還有userData的東西，沒什麼用。Flash也帶了一個Storage，相對比較大，空間是Cookie的25倍左右，當時現在也廢棄Flash了。

到了H5時代，就統一了，LocalStorage一統天下。官方建議是每個網站 5MB ，非常大了，雖然瀏覽器設定會有差異，但是一般就存些JSON或者字串或者快取來說，足夠了。

HTML5 LocalStorage 本地儲存

• sessionStorage：儲存的資料用於瀏覽器的一次對談，當對談結束（通常是該視窗關閉），資料被清空；
  
• localStorage：儲存的資料長期存在，下一次存取該網站的時候，網頁可以直接讀取以前儲存的資料。除了儲存期限的長短不同，這兩個物件的屬性和方法完全一樣。
  

它們很像cookie機制的強化版，雖然能夠動用大得多的儲存空間。但是，與cookie一樣，它們也受同域限制。某個網頁存入的資料，只有同域下的網頁才能讀取。

通過檢查window物件是否包含 sessionStorage 和 localStorage 屬性，可以確定瀏覽器是否支援這兩個物件。

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

Storage 操作

sessionStorage 和 localStorage 儲存的資料，都以 「Key-Value鍵值對」 的形式存在。也就是說，每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存。

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法，儲存變數名為key，值為value的變數
var valueSession = sessionStorage.getItem("key");  // getItem方法，讀取儲存變數名為key的值
sessionStorage.removeItem('key');      // removeItem方法，刪除變數名為key的儲存變數
sessionStorage.clear();        // clear方法，清除所有儲存資料
//localStorage 操作
localStorage.setItem("key","value");     // 儲存變數名為key，值為value的變數
localStorage.key = "value"        // 同setItem方法，儲存資料
var valueLocal = localStorage.getItem("key");   // 讀取儲存變數名為key的值
var valueLocal = localStorage.key;      // 同getItem，讀取資料
localStorage.removeItem('key');      // removeItem方法，刪除變數名為key的儲存變數
localStorage.clear();         // clear方法，清除所有儲存的資料

// 利用length屬性和key方法，遍歷所有的資料
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 儲存 localStorage 資料為 Json 格式
value = JSON.stringify(jsonValue);      // 將 JSON 物件 jsonValue 轉化成字串
localStorage.setItem("key", value);     // 用 localStorage 儲存轉化好的的字串

// 讀取 localStorage 中 Json 格式資料
var value = localStorage.getItem("key");    // 取回 value 變數
jsonValue = JSON.parse(value);      // 把字串轉換成 JSON 物件

Storage 事件

當儲存的資料發生變化時，會觸發 storage 事件。我們可以指定這個事件的回撥函數。

window.addEventListener("storage",onStorageChange);

回撥函數接受一個event物件作為引數。這個event物件的key屬性，儲存發生變化的鍵名。

function onStorageChange(e)
{
  console.log(e.key); 
}

除了key屬性，event物件的屬性還有三個：

• oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。
• newValue：更新後的值。如果該鍵被刪除，則這個屬性為null。
• url：原始觸發storage事件的那個網頁的網址。
  

特別注意的是，該事件不在導致資料變化的當前頁面觸發。如果瀏覽器同時開啟一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的資料時，其他所有頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。可以通過這種機制，實現多個視窗之間的通訊。所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發storage事件。

擴充套件知識

1、localStorage和sessionStorage是HTML5 Web儲存的提供的兩種儲存方式，在IE7以上以及大多數瀏覽器都是支援的

2、localStorage和sessionStorage的區別：

(1)、localStorage和sessionStorage一樣都是用來儲存使用者端臨時資訊的物件。

(2)、他們都是隻能儲存字串型別的物件（雖然規範中可以儲存其他原生型別的物件，但是目前為止沒有瀏覽器對其進行實現）。

(3)、localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。（記錄在記憶體中的）

　　sessionStorage生命週期為當前視窗或分頁，一旦視窗或分頁被關閉了，那麼所有通過sessionStorage儲存的資料也就被清空了（回話性質的儲存）

(4)、不同瀏覽器無法共用localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共用相同的localStorage（頁面屬於相同域名和埠），但是不同頁面或分頁間無法共用sessionStorage的資訊。

　　這裡需要注意的是，頁面及分頁僅指頂級視窗，如果一個分頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共用sessionStorage的。（同源原則）

3、localStorage和sessionStorage可儲存資料的大小一般為5MB

【相關推薦：、】

以上就是JavaScript使用localStorage儲存資料的詳細內容，更多請關注TW511.COM其它相關文章！