LocalStorage 用來儲存網頁裡要用來呈現在畫面上的數據資訊

可存取時間：刷新或重開頁面時都不會消失，除非被手動清除，否則會永遠保存
可存取大小：5MB

SessionStorage 較常用在內容特別多的表單上並且需要拆分成多個頁面的時候，因為使用者需要依序切換頁面來填寫表單資訊，就可以將使用者所填寫的表單資訊都儲存在 SessionStorage 中。

可存取時間：關閉頁面或瀏覽器後就會被清除
可存取大小：5MB

• LocalStorage 和 SessionStorage 儲存資料的方式皆為 key value pair，且key 和 value 都必須是 String。(如果存進去的 value 不是 String，console.log(typeof) 會看到資料自動變成了 String，即使存入的資料是 Number 或 Array....等，都會自動變成 String)
• 使用 key 就可以找到 value，且每一筆資料的key 是獨一無二的，不能重複!
• 兩者使用方法相同，以下統一使用 localStorage 舉例

setItem(key,value) 儲存資料

localStorage.setItem("name","Helen");

查看存進 Storage 的方式有兩種，一種是 console.log，另一種是 F12，Firefox 可以在 storage 找到，chrome 則可以在 appilication 找到，會看到 key 是 name, value 是 Helen 的資料

getItem(key) 取得資料

let localname = localStorage.getItem("name");
console.log(localname); // Helen

removeItem(key) 刪除資料

刪除某筆資料，使用 key 就可以刪除對應的 value 資料

localStorage.removeItem("name");

則localStorage & SessionStorage 的 name 這筆資料就被刪除了

clear() 刪除全部資料

刪除 Storage 內的所有資料

localStorage.clear();

在前面說過不管存入什麼資料到 Storage 都會自動變成 String，如果我們想要以什麼型態存入資料就以什麼型態取出資料的話，就必須使用 JSON.stringify() & JSON.parse()。
下面以陣列做舉例，當然 Object,Boolean...等各種資料型態都是適用的。

JSON.stringify()

let friends = ["Josh","John","Mike"];
localStorage.setItem("friends",JSON.stringify(friends));

用 F12 查看時，我們會看到 key 是 friends，value 是 ["Josh","John","Mike"] 的資料在裡面。

JSON.parse()

let data = JSON.parse(localStorage.getItem("friends"));
concole.log(data); // ["Josh","John","Mike"]

• 總結:資料存入 Storage 到取出 4 步驟：

1. JSON.stringify() 把原本的資料變成 String
2. setItem(key,value) 儲存到 Storage
3. getItem(key) 從 Storage 取出 String
4. JSON.parse() 把取出的 String 變成原本的資料型態

補充：
Cookie 常用來儲存用戶的登入狀態，並且也可以用來儲存其它關於網頁上的使用者設定、資訊等等....
可存取時間：可以自行設定時間，如果沒有設定的話則就是採用預設(關閉瀏覽器後失效)
可存取大小僅 4k

參考資料:
https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/232745/