HTML 小知識 - Web Storage vs Cookie

什麼是 Web Storage 什麼是 Cookie

Web Storage 為瀏覽器中的儲存區，可把網頁的資料儲存在本地端，其作用如同 Cookie，Web Storage 和 Cookie 儲存的資料，皆以 key-value pair (鍵對值)的形式保存

Web Storage 在一般瀏覽器下有 5 MB 的儲存空間，相比 Cookie 的 4 KB 來說相對來的大，另外 Cookie 中的資料會在本地端瀏覽器與伺服器之間，所以使用 Cookie 就要 request ，導致性能會降低，而 Web Storage 只會在本地端，所以減少了對伺服器的資料請求

應用場景

由於 Cookie 的資料可以使用在用戶端與伺服器之間，所以比較常用在判斷用戶是否登錄。針對登錄過的用戶，伺服器會在用戶端登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄，而 Web Storage 就能使用在曾瀏覽的商品或者購物車訊息這些只要用戶端就能做的事情，這樣也能減少瀏覽器送出 request 至伺服器

sessionStorage vs localStorage

Web Storage 有兩種：sessionStorage 以及 localStorage，使用 windows 的打開 F12 ( HTML code )，進入 Application 會有 Storage 列表，就能從那邊看到 sessionStorage 和 localStorage 儲存的資料

#sessionStorage

屬於暫存性，僅在當下有效，關閉頁面或瀏覽器後被清除，通過 Window.sessionStorage 來使用

#localStorage

屬於永久性，瀏覽器關閉後，再次打開依然有效，通過 Window.localStorage 來使用

sessionStorage 和 localStorage 共通點

• 在瀏覽器的隱私模式下面是不可讀取的
• 目前所有的瀏覽器中都會把值型別限定為 string 型別，所以像是物件型別需要使用 JSON 轉換成字串型別

  JASO 全名為 JavaScript Object Notation ( Javascript 物件符號)，可以把資料轉成字串型

• 儲存資料的時候，可用 Storage 物件的 setItem 方法，取值使用 getItem 方法
• 不能被爬蟲抓取到
• 在 IE8 以上的 IE 版本才支援
• 本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間

Storage的應用

這邊使用 localStorage 當範例

• 儲存資料

  localStorage.setItem("keyName","dataName") //前者為儲存項目的"鍵"，後者為鍵值
  localStorage.keyName = 'dataName'

• 讀取資料

  localStorage.getItem("keyName") //讀取儲存在 localStorage 鍵值為 keyName 裡的值
  localStorage.keyName //讀取儲存在 localStorage 鍵值為 keyName 裡的值
  localStorage.valueOf() //讀取儲存在 localStorage 上的所有資料
  localStorage.key(0) // 讀取第一個鍵名

• 刪除資料

  localStorage.removeItem("keyName"); //刪除儲存在 localStorage 鍵值為 keyName 裡的值

• 將 JSON 儲存到 localStorage 裡

  const data = [
    {
      name: '小華',
      age: 18,
      sex: 'male'
    },
    {
      name: '小花',
      age: 17,
      sex: 'female'
    },
    {
      name: '小美',
      age: 18,
      sex: 'female'
    },
  ]
  localStorage.setItem("people", JSON.stringify(data)); // JSON 轉為字串存到 localStorage 裡
  const newPeople = JSON.parse(localStorage.getItem("people")); //把取出的 localStorage 資料使用 JSON 轉換成 JavaScript 的數值或是物件
  console.log(newPeople)

• 清空

  localStorage.clear()