HTML5 的 Web Storage- local storage 與 session storage

以往我們要在使用者端存取資料會使用 cookie,但 cookie 可以存的資料非常有限,所以後來 HTML5 發展出了 Web Storage,而 Web Storage 又分成了 local storage 和 session storage,這邊先比較一下 cookie 和 Web Storage的差異。

   Web Storage Cookies
儲存空機大小 5M(瀏覽器可能各異) 4k(瀏覽器可能各異)
伺服器端存取 可以 不行
存取限制 相同網域 相同網域及路徑
處理方式 使用 js 物件 字串
事件支援
刪除方式 使用API 關閉瀏覽器或設定時間過期

localStoragesessionStorage 的差別則在於生命週期和有效範圍,sessionStorage 只要關閉視窗或分頁就會消失,localStorage 需要手動靠 API 刪除,而 localStorage 可以跨瀏覽器分頁(tab)存取,sessionStorage不行。

常見會使用的方法有以下這些:

  • 屬性
    • length
  • 方法
    • key(n) 、getItem(key) 、setItem(key,value) 、removeItem(key) 、clear()

 

用法如下,這邊就用 local storage 說明:

//設定值
localStorage.setItem("keyname", "value"); 
//取值
localStorage.getItem("keyname")
//刪除值
localStorage.removeItem("keyname"); //刪除某筆資料
localStorage.clear(); //刪除所有資料

 

由於 local storage 存取的時候也只能存成字串,所以如果要存比較複雜的資料的話,我們就會需要用 json 轉 string 存資料,反向則把字串轉回 json 讀取出來。

//取值
JSON.stringify(data)
//給值
JSON.parse(data)

 

最後這邊來個簡單的範例,我們從輸入欄位新增資料,也可以讓使用者刪除每一筆資料,每次操作也同時更新 local storage,這樣重刷頁面資料也都能維持上次更新的狀態。