JavaScript使用localStorage儲存資料

Moshow鄭鍇 發表於 2020-04-07
JavaScript localStorage

背景

以前js都是 SessionCookie 來儲存資訊,彷彿我還停留在那個時候,一問同事有沒有新的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事件。