本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

大家可能都覺得儲存資料一直都是後端在做的事情，畢竟要跟資料庫進行溝通，其實前端也是可以做儲存資料的動作，前端工程師快要變成全端工程師了XD

今天這篇文章主要就是要來介紹一下網頁儲存的三大元素： localStorage 、 sessionStorage 、 Cookie 。

localStorage

從 local 這個名詞就可以知道這個儲存是直接儲存在本地端，就算網頁關閉再重開，資料一樣會存在除非使用者自行刪除， localStorage 會以 JSON 格式作為儲存資料型態，而 localStorage 一共以下幾種使用方式。

• localStorage.setItem('key', 'value')

  將資料儲存於 localStorage 中，儲存成功後資料型態會形成 {'key': 'value'} 的模樣。

• localStorage.getItem('key')

  利用 key 值將資料從 localStorage 中讀取出來，這邊跟 JSON 的讀取操作非常像，若 localStorage 內沒有此筆資料則會回傳 null 。

• localStorage.removeItem('key')

  利用 key 值將資料從 localStorage 中刪除，若 localStorage 內沒有此筆資料則會回傳 undefined 。

• localStorage.clear()

  將全部的資料從 localStorage 中刪除，若 localStorage 內沒有資料則會回傳 undefined 。

sessionStorage

從 session 這個名詞就可以知道這個儲存是儲存在當前頁面，只要網頁不關閉資料都會存在，一旦網頁關閉代表這個 session 也關閉了所以資料就會消失， sessionStorage 跟 localStorage 一樣都是以 JSON 格式作為儲存資料型態，操作方法也跟 localStorage 一模一樣。

• sessionStorage.setItem('key', 'value')

  將資料儲存於 sessionStorage 中，儲存成功後資料型態會形成 {'key': 'value'} 的模樣。

• sessionStorage.getItem('key')

  利用 key 值將資料從 sessionStorage 中讀取出來，這邊跟 JSON 的讀取操作非常像，若 sessionStorage 內沒有此筆資料則會回傳 null 。

• sessionStorage.removeItem('key')

  利用 key 值將資料從 sessionStorage 中刪除，若 sessionStorage 內沒有此筆資料則會回傳 undefined 。

• sessionStorage.clear()

  將全部的資料從 sessionStorage 中刪除，若 sessionStorage 內沒有資料則會回傳 undefined 。

Cookie

Cookie 跟上面兩個 storage 就不太一樣了， Cookie 由於本身非常小(大約只有4KB)使得 Cookie 在網頁儲存中可以說是最快速的，所以通常都是拿來進行使用者辨識用，一般來說 Cookie 會拿來用在快速登入上，當使用者於網站上登入後，可以將登入後的識別碼利用 Cookie 儲存起來，下次使用者瀏覽到該網站時 Cookie 內有這識別碼就可以讓使用者直接登入不用再重新輸入帳號密碼，而 Cookie 就非常單純了只有一種操作方式。

• document.cookie = "key=value"

  所有的新增修改刪除都是用這個方式來操作，舉例來說：

  document.cookie = "name=Andy"  // 新增一個cookie
  document.cookie                // 讀取全部cookie
  document.cookie = "name=;"     // 移除name之cookie
  

比較

最後這邊用一張圖讓讀者們能更容易的比較出以上這三種網頁儲存方式的差異性。

以上三種網頁儲存其資料型態只接受 string 型態，也因此無法直接儲存 object 、 array 等等資料型態，假如今天真的有需要儲存這幾種型態的話，可以使用 JSON.stringify() 的方式形成一個 JSON string ，這樣就能順利的儲存 object 以及 array 這種資料型態，要還原也非常簡單，只要使用 JSON.parse() 就可以將 JSON string 還原成 object 以及 array 了喔！

總結

今天介紹了網頁儲存的三大元素，每個都有各自的功能以及用途，但也不能過度使用，畢竟會有安全上的問題，由於這些儲存都是可以透過瀏覽器的開發人員模式查看，因此很容易就可以被有心人士盜取，尤其是在公用電腦，因此各位如果真的要使用以上這幾種網頁儲存方式，不妨先將資料加密過在儲存到使用者本地端，讓資料可以再更加安全一點。