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事件。