	Cookie	LocalStorage	SessionStorage
資料大小	≤4KB	≥5MB	≥5MB
生命週期	預設資料失效是關閉瀏覽器，也可以設定失效時間	不會過期，除非手動清除	每次分頁或瀏覽器關掉後就會清除
與 Server 溝通	每次都會攜帶在 HTTP 中，保存過多數據會帶來效能問題	僅在瀏覽器保存，不參與 Server 溝通	僅在瀏覽器保存，不參與 Server 溝通

HTTP cookie（web cookie、browser cookie）為伺服器傳送給使用者瀏覽器的一個小片段資料，通常由伺服器透過 Set-Cookie header 傳遞給瀏覽器。瀏覽器收到後會將 cookie 儲存起來，並在下一次請求回傳 cookie 至相同的伺服器。

可以在後端設定修改，資料僅在本地瀏覽器儲存。可以設定失效時間，預設為關閉瀏覽器。

常見用途
Cookie 最常見的用途之一是認證身份，例如帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊，也被應用於追蹤並分析使用者行為廣告上。Cookie 也被用於客戶端的儲存方式，但由於 cookie 會被附加在每一次的 request 之中，可能會影響效能，所以如果是不需要記錄在 server 的資訊，可以改用 storage API。

localStorage

不會和跟隨 HTTP 請求，所以不會佔用資源，適合儲存較複雜且不敏感的資料
需要使用者主動刪除，否則就是永久儲存，不同瀏覽器之間不會共享資料。
形式：key → value
key 跟 value 必須是字串，如果是 object 或 number 會自動轉換成 string

常見用途
而另一方面 localStorage 代替了 Cookie 管理購物車的工作，同時也能勝任其他工作。比如說 HTML 遊戲通常會產生一些數據，localStorage 也很適合使用。

sessionStorage

臨時儲存，跟 LocalStorage 只差在-每次分頁或瀏覽器關掉後就會清除

常見用途
如果遇到一些內容特別多的表單，為了提升用戶體驗，可能要把表單頁面拆分成多個子頁面，然後按照步驟引導用戶。這時候 sessionStorage 就可以發揮出效用。

安全考慮

並非所有數據都適合儲存在這些其中。因為只要網站中存在 XSS 注入的風險，打開控制台，就可以隨意修改值，就能對你的 localStorage 肆意妄為。所以千萬不要將敏感數據儲存在這其中。

使用方法

讀取出來是一個很長的字串，字串裡面是所有曾經儲存的 cookie，格式是 key=value，用分號 ; 分隔不同的 cookie。

1 2	allCookies = document.cookie; console.log(allCookies);

Cookie 讀取函數
內建的方法沒有那麼好用，通常我們會自己寫一個方便讀取個別 cookie 的函數：

function parseCookie() {
  var cookieObj = {};
  var cookieAry = document.cookie.split(';');
  var cookie;

  for (var i = 0, l = cookieAry.length; i < l; ++i) {
    cookie = jQuery.trim(cookieAry[i]);
    cookie = cookie.split('=');
    cookieObj[cookie[0]] = cookie[1];
  }

  return cookieObj;
}

function getCookieByName(name) {
  var value = parseCookie()[name];
  if (value) {
    value = decodeURIComponent(value);
  }

  return value;
}

我們就可以很方便的讀取 cookie，像是取得 username 的 cookie 只需要用 getCookieByName(‘username’)。

當我們在設定的 value 的時候，可以使用 encodeURIComponent() 這個方法來儲存內容，可以讓特殊符號 $#@*^!,這種轉換成 URI 形式，讓程式解析的時候比較不會出錯。

1 2	document.cookie = 'cookie3=value3'; document.cookie = newCookie;

參數設定

建立 cookie 後面還可以加上這些設定：

path=path
設定能讀取到此 cookie 的路徑，例如 ;path=/ 表示讓整個網站都讀取得到，預設為目前網頁所在的路徑。

domain=domain
設定能讀取到此 cookie 的網域

max-age=seconds
設定 cookie 的存活期限，單位為秒，例如 86400 就是一天後失效。

expires=date-in-GMTString-format
設定 cookie 的存活期限，值是一個 Date.toUTCString() 格式的時間字串，這個參數在 HTTP 1.1 之後已經被 max-age 取代。

secure = boolean/null
設定 cookie 只能於 https 連線中被傳送。

設定一個新 cookie 只有 key=value 部分是必要的，其他部分都可以省略。

1
2
3

document.cookie = 'id=test0; Secure; Path=/; Domain=example.com';
document.cookie = 'id=test1; Expires=Wed, 21 Oct 2015 07:28:00 GMT';
document.cookie = 'id=test2; Max-Age=2592000';

當一個 cookie 沒有設定失效時間，就是所謂的 session cookie (有設定失效時間的則稱 persistent cookie)，該 cookie 會在使用者關閉瀏覽器後被自動刪除。

// 設定兩個 cookie 叫 test1, test2
// 在瀏覽器關閉後會自動被刪除
document.cookie = 'test1=Hello';
document.cookie = 'test2=World';

// 設定一個 username cookie 裡面的值是 Bobee，儲存一個月
document.cookie = 'username=Bobee; max-age=2592000; path=/';

單純把你想要那個 cookies 值，設成過期就好
例如刪除 username 這一個 cookie：

1	document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

localStorage

H5 對於 web storage 的支援很友好，使用方法很簡單

// 獲取指定 key 的本地儲存的值
localStorage.getItem('keyName');

// 將 value 儲存到 key 欄位中
localStorage.setItem('keyName', value);

// 刪除指定 key 的本地儲存的值
localStorage.removeItem('keyName');

// 清除所有的key ,value,慎用，慎用，慎用，會清除所有，會把別的網頁的儲存也刪除
localStorage.clear();

sessionStorage

基本和 localStorage 一樣

//獲取指定 key 的本地儲存的值
sessionStorage.getItem('keyName');

// 將 value 儲存到 key 欄位中
sessionStorage.setItem('keyName', value);

// 刪除指定 key 的本地儲存的值
sessionStorage.removeItem('keyName');

// 清除所有的 key, value,慎用，慎用，慎用，會清除所有，會把別的網頁的儲存也刪除
sessionStorage.clear();

Storage 取物件

雖然我們可以透過 Storage 方法，輕鬆的將資料儲存在本地端，但是實際應用之後，我們會發現我們要儲存的資料 value，全部被轉成字串格式，因此當我們要儲存的資料為一個物件的時候就會產生一個嚴重的問題：

let string = 'testString';
let number = 12345;
let array = ['asd', 123, true];
let object = { test: 1 };

localStorage.setItem('item', string);
localStorage.setItem('item2', number);
localStorage.setItem('item3', array);
localStorage.setItem('item4', object);

console.log(localStorage.getItem('item')); // testString
console.log(localStorage.getItem('item2')); // 12345
console.log(localStorage.getItem('item3')); // 'asd', 123, true
console.log(localStorage.getItem('item4')); // [object Object]

有幾種方法可以有效避開這種情況，而在本次的課題當中，我們要使用到 JSON 這種資料格式。JSON 全名為 JavaScript Object Notation (Javascript 物件符號)，可以把資料轉成字串型別，方便將資料於網頁與伺服器之間做傳輸，其中包含兩種方法：

JSON.stringify()：將資料轉為 JSON 格式的字串。
JSON.parse(myJSON)：將資料由 JSON 格式字串轉回原本的資料內容及型別。

let string = 'testString';
let number = 12345;
let array = ['asd', 123, true];
let object = { test: 1 };

localStorage.setItem('item', JSON.stringify(string));
localStorage.setItem('item2', JSON.stringify(number));
localStorage.setItem('item3', JSON.stringify(array));
localStorage.setItem('item4', JSON.stringify(object));

console.log(JSON.parse(localStorage.getItem('item'))); // testString
console.log(JSON.parse(localStorage.getItem('item2'))); // 12345
console.log(JSON.parse(localStorage.getItem('item3'))); // (3) ["asd", 123, true]
console.log(JSON.parse(localStorage.getItem('item4'))); // {test: 1}

參考文獻:

JavaScript Cookie
LocalStorage

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

瀏覽器資料儲存-Cookie、LocalStorage、SessionStorage

localStorage

sessionStorage

安全考慮

使用方法

參數設定

localStorage

sessionStorage

Storage 取物件

參考文獻:

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

🚀線上課程分享

Hahow

六角學院

Udemy

cookie

localStorage

sessionStorage

安全考慮

使用方法

cookie

讀取 cookie

寫入 cookie

參數設定

刪除 cookie

localStorage

sessionStorage

Storage 取物件

參考文獻:

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

🚀線上課程分享

Hahow

六角學院

Udemy