# 前端資料本地儲存的方式

###### tags: `vic的blog文章`

blog網址： https://yoshuu.github.io/2023/04/27/f2e-cookies-vs-local-storage-vs-session-storage/

瀏覽器本身是可以儲存資料的，方法不只一種，目前我知道有以下這些方法：

1. Cookies
2. localStorage, sessionStorage
3. indexedDB

其中`indexedDB`沒有去詳細理解內部實作細節，因為使用到的情境似乎很少見，我自己從來沒用到過，可能需要有龐大暫存的需求情境才有機會碰到，這個部分我只紀錄幾篇有關的技術文章：

- [IndexedDB](https://zh.javascript.info/indexeddb)
- [前端如何緩存大筆資料：IndexedDB 介紹/應用 | Yass Tsai](https://www.yasssssblog.com/2020/08/19/web-indexeddb/)
- [【瀏覽器資料存取】IndexedDB](https://lilyliu.coderbridge.io/2021/08/04/indexedDB/)

## 暫存機制的存在意義

為什麼不把資料都存在伺服器端就好，資料為什麼得放在瀏覽器本身的儲存區？

其實是有它的必要性，會有情境是把東西放在瀏覽器中比較好的狀況，而且放在瀏覽器的本地也有許多的好處。

首先，第一個比較直觀的好處是假如可以直接把資料就存在本地端，那就代表可以減少瀏覽器跟伺服器之間的數據運輸量，這樣可以減少從伺服器載入資源的速度，換句話說，這樣可以提升網站的載入速度，減少網站的等待時間。

然後存在本地端的話，也可以拿來做記錄用戶的行為，比如說登入了一個網站，要是沒有登出的話，下一次再進到這個頁面中發現還是登入的狀況，這其實也是瀏覽器暫存機制幫的忙，藉由在本地端儲存的資料，可以判斷有沒有登入過，已經登入者是誰，這樣就不會需要每次要登入時，都一定得重新打一次帳號密碼，這部分很好的幫助優化了用戶體驗。

總得來說，雖然沒有暫存機制，網頁也是可以運作下去，它不算是缺少就弄不出網頁，但是由於使用了它可以提升網站性能，用戶體驗，甚至是開發者的開發效率，所以已經變成了現代網站開發中不可或缺的一部分。

## Cookies vs. Local storage vs. Session Storage

接下來，這是這三種方式來做一個比較，開頭前先說，每一種方式雖然有舊新之分，但卻沒有好壞之別，每種都有自己適合使用的情境，那這邊我有做一個表，先從這個表來看看：


這三種方法相同的地方在於說都會存在到同一個正在使用的瀏覽器之中，若是在`chrome`中使用儲存那資料就會儲存在`chrome`中，如果在`Safari`中就會存在於`Safari`，以此類推，所以是沒辦法做到跨瀏覽器儲存的，可以當作暫存機制是獨立在瀏覽器中的，不會跟其他使用者衝突，或是說可以互相讀取，這點要特別注意。

那就開始從第一點來看吧！

### 儲存大小

會發現說，`cookies`特別的小，才 4kb，然後`Local storage`有 10mb 最多，`Session Storage`也有 5mb 的儲存大小，這傳遞出了一個訊息，就是假如你想要在本地端暫存很多資料，肯定首選不是`cookies`，而為什麼`cookies`會特別的小，也是有它的原因存在的，後續會談到。

### 瀏覽器

`cookies`作為較為舊的瀏覽器儲存方式，它可以支援 HTTP4 的舊瀏覽器，至於`Local storage`以及`Session Storage`比較新就只能支援 HTTP5 的瀏覽器，好消息是現在網站應該已經全部都是 HTTP5 了，所以這塊基本上不會有什麼影響。

### 到期問題

資料儲存之後可以儲存多久，這三種方法都不太一樣，`Local storage`的話就是會永久保存資料，除非主動把它刪除掉，不然它就會永遠存在那邊。

而`Session Storage`會看當下的這個頁面，它的到期時間跟頁面息息相關，要是關掉當前頁面，那`Session Storage`裡面資料就會過期，這是它跟`Local storage`最主要的差別。

最後是`cookies`他很特別，可以手動去設定`cookies`的確切到期時間，所以可以完全掌握`cookies`內的資料可以存在多久。

### 伺服器儲存端跟儲存位置

會把這兩個放在一起講，因為我覺得這兩項的性質差不多。

`cookies`可以儲存的地方不僅局限於瀏覽器，伺服器端也可以做存取，在這三種的方法中只有它可以做的到，我個人覺得這也就是為什麼`cookies`可以儲存的大小這些少的原因，因為假如它像是`Local storage`及`Session Storage`一樣可以存取那麼多東西的話，那在儲存送到伺服器端就會比較困難，然而我們還是會需要存在於本地端，但是也可以送到伺服器端的功能，像是之前講的紀錄用戶狀態，就會使用`cookies`來儲存用戶的登入狀態。

`Local storage`及`Session Storage`的資料只能局限於本地端，只能存在於瀏覽器，各有好壞只是看要使用的情境是什麼，就會選擇使用哪一種的方式。

## 使用的語法

那在`javascript`要怎麽樣去使用這三個方法，就得先去了解它們各自的語法，在這邊我學習的時候是去參考這三個部分的 MDN，位置分別如下：

- [Window.localStorage - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/localStorage)
- [Window.sessionStorage - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/sessionStorage)
- [使用 HTTP cookies - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)

在這邊我覺得可以拆成兩個部分來看，一個部分是`Local storage`及`Session Storage`，因為它兩個部分幾乎語法一模一樣，另一個是`cookies`。

在開始講語法之前，先來介紹一下要怎麼樣在瀏覽器上觀測到本地儲存的位置在哪裡。

1. 先打開 Chrome 瀏覽器的 DevTools
2. 打開後最上方去尋找 Application
3. 進到裡面後，最左邊那一排可以看到 storage 的區域

之後都可以從這邊去看本地端儲存的資料有哪一些。

### 儲存資料

`Local storage`及`Session Storage`:

// localStorage
localStorage.setItem("name", "Vic");

//sessionStorage
sessionStorage.setItem("name", "Vic");

// 這兩種儲存的時後都一樣要有一組key/value才能成功儲存。

`cookies`:

document.cookie = "name=Vic";

//也是一樣要寫key/value但是要寫在字串裡面。

### 獲取儲存資料

`Local storage`及`Session Storage`:

// localStorage
localStorage.getItem("name");

console.log(localStorage.getItem("name")); // vic

//sessionStorage
sessionStorage.setItem("name");

console.log(sessionStorage.setItem("name")); // vic

// 有set那麼拿的時候就是get，這邊要注意只輸入key就好

`cookies`:

document.cookie;
console.log(document.cookie); // name=Vic;

// 似乎只能直接印出所有，看所有的。

### 刪除資料

`Local storage`及`Session Storage`:

// localStorage
localStorage.removeItem("name"); // 刪除單個

localStorage.clear(); // 刪除所有

//sessionStorage
sessionStorage.removeItem("name"); // 刪除單個

sessionStorage.clear(); // 刪除所有

// 這個部分蠻直覺的，要記得刪除也是抓key就好，手動刪除的部分

`cookies`:

document.cookie = "name=; expires=Thu, 01 Jan 1900 00:00:00 GMT";

// cookie就是很特別的那種，要刪除的話就得再次設置，比如說給它一個過去的到期日期，那現在就一定到期，等於它就被刪除了。

## 做個總結

會發現到說這三種方式其實都大同小異，不過其實還是有差別存在的，所以在使用前還是得對它們稍微去做個了解，最主要是除非有需要有特別存取到伺服器上的情境，不然正常狀況下要用到瀏覽器暫存功能會使用`Local storage`及`Session Storage`就好，會比`cookies`容易使用，不然光是語法我覺得`cookies`確實偏難理解，另外兩種倒是蠻直覺的。

## 參考資料

### 文章類

[Cookie，document.cookie](https://zh.javascript.info/cookie)
[LocalStorage，sessionStorage](https://zh.javascript.info/localstorage)
[認識瀏覽器的神秘儲存空間 - localStorage | 五倍紅寶石・專業程式教育](https://5xruby.tw/posts/localstorage)

### 影片類

[JavaScript Cookies vs Local Storage vs Session Storage - YouTube](https://www.youtube.com/watch?v=GihQAC1I39Q)
[Local Storage Explained In 10 min | Javascript - YouTube](https://www.youtube.com/watch?v=fYTTUBa-lPc)
[認識 JavaScript 的 WebStorage - YouTube](https://www.youtube.com/watch?v=KfOBmxPILKs&t=430s)