寫在前面
現代瀏覽器都具備完善的資料儲存功能，為維護用戶數據，提高使用者體驗有著重要意義，這是第三方資料庫無法替代的。
資料庫儲存VS瀏覽器儲存
問題：目前的資料庫儲存技術方便且成熟，為什麼還需要使用瀏覽器的儲存空間呢？
要搞懂這個問題，我們就需要清楚的瞭解兩種產品的定位了。
資料庫：
定義：服務端組織、儲存和檢索資料的系統。
用途：儲存大量的用戶數據等。
特點：資料持久化，支援多使用者併發訪問。
瀏覽器儲存
定義：客戶端儲存資料的系統。
用途：快速訪問和儲存輕量級資料。
特點：儲存空間相對（資料庫）較小，資料永續性可靈活切換。
爲了更加形象的解釋，我們可以大致類比圖書館藏書室、閱讀區和顧客三者的關係。
藏書室相當於資料庫，存放大量書籍，通常不對外開放，支援多個員工同時管理書籍。
閱讀區相當於瀏覽器儲存空間。閱讀區可以存放少量書籍，便於訪客快速檢視。
綜上：
儘管資料庫提供了強大的資料管理和儲存能力，但是在實際應用中，合理利用使用者瀏覽器的儲存空間可以顯著提高使用者體驗，減輕伺服器負擔。
既然瀏覽器儲存空間如此重要，那麼我們就來聊聊LocalStorage、SessionStorage和Cookies。
瀏覽器的儲存空間
一、LocalStorageI（本地儲存）
LocalStorage是Web Storage API的一部分，在瀏覽器上以鍵值對的形式儲存字串形式的資料，主要用於持久化儲存使用者的表單資料。
特點：
永續性：LocalStorage中儲存的資料存在使用者裝置的硬碟中，能夠長期存在，除非被人為清除。
容量：大多數瀏覽器的LocalStorage的容量是5MB左右。
安全性：通常不隨著HTTP請求傳送到伺服器，但是可能受到指令碼攻擊，不建議儲存敏感資料。
使用方式
//設定
localStorage.setItem('key','value');
//獲取
localStorage.getItem('key');
//清除某一資料
localStorage.removeItem('key');
//清空所有資料
localStorage.clear();
如果需要獲取或存入物件型別的資料，需要先將內容進行序列化JSON.strigfy()或者反序列化JSON.parse()
二、SessionStorage（會話儲存）
其實會話儲存和本地儲存類似，只是儲存的資料生命週期不同。所有在會話儲存空間的資料會隨著當前會話的結束而銷燬。
會話在瀏覽器儲存技術上的定義是：使用者與網頁的一次互動過程。具體來說，就是頁面從建立到關閉的一段時期。
特點：
永續性：SessionStorage只在標籤頁的生命週期內有效，頁面關閉，資料清除。
容量：大多數瀏覽器的SessionStorage的容量是5MB左右。
安全性：通常不隨著HTTP請求傳送到伺服器，但是可能受到指令碼攻擊，不建議儲存敏感資料。
使用方式
//設定
sessionStorage.setItem('key','value');
//獲取
sessionStorage.getItem('key');
//清除某一資料
sessionStorage.removeItem('key');
//清空所有資料
sessionStorage.clear();
SessionStorage也是以鍵值對的形式儲存字串形式的資料，可以在使用者填入表單資料時儲存備份，避免因中途重新整理丟失資料。
三、Cookies
Cookies是廣泛使用的客戶端儲存技術。主要用於儲存小型文字檔案，在瀏覽器和伺服器之間傳遞資訊，使得網站能夠記住使用者偏好、登入狀態等資訊。
原理
當用戶第一次訪問一個網站時，伺服器可以向瀏覽器傳送一個Cookie。這個Cookie就會儲存在使用者瀏覽器上，每次使用者訪問網站時，瀏覽器就將這個Cookie傳送給伺服器。伺服器透過校驗Cookie的某些內容（token）就能精準識別出使用者，並且根據Cookie裡面的資訊提供個性化的體驗。
特點
cookie的特點和其欄位內容有關，總共有9個欄位，如下圖：
1.Name
描述:標識Cookie的名稱
例如：
username
2.Value
描述:具體的資料
示例：
novalic
3.Domain
描述:指定Cookie應用於哪個域名
示例：
.baidu.com
4.Path
描述:指定Cookie應用於哪些URL路徑
示例：
/表示該域名下的所有路徑
5.Expires/Max-Age
描述:Cookie的過期時間或者最大生命週期
示例：
Tue, 19 Jan 2021 12:00:00 UTC或3600秒
6.Secure
描述:設定此標誌代表只有在使用HTTPS協議時纔會傳送該Cookie - 示例：在Cookie中帶上
Secure關鍵字即可
7.HttpOnly
描述:設定此標誌代表只能使用HTTP協議訪問，不能透過JS訪問 - 示例：在Cookie中帶上
HttpOnly關鍵字即可
8.SameSite
描述:控制Cookie是否隨跨站請求一起傳送
選項：
Strict:不允許跨站請求Cookie
Lax:預設情況不傳送Cookie,在GET請求下可以跨站傳送Cookie
None:允許跨站請求Cookie
示例：設定
SameSite=Lax
9.Priority
描述:設定Cookie的優先順序，控制網路請求時的傳送順序。
選項：
High：該 Cookie 應優先發送。
Medium：該 Cookie 為中等優先順序，預設值。
Low：該 Cookie 為低優先順序，應在其他 Cookies 之後傳送。
示例：設定
Priority=High
以上就是Cookie的欄位，這些欄位讓開發者能夠對Cookies的行為進行精確控制，具體而言，其大小限制為4KB左右，過期時間、安全性和可訪問性等方面都是靈活變化的。
我們來看一下操作Cookies的方式：
//設定Cookie
document.cookie = "
username=novalic;
Domain=.baidu.com;
path=/;
expires=86400;
Secure;
HttpOnly;
SameSite=Lax;
Priority=High
"
//獲取Cookie
function getCookies() {
var cookieArray = document.cookie.split('; ');
var cookies = {};
cookieArray.forEach(function(cookie) {
var keyValue = cookie.split('=');
cookies[keyValue[0]] = keyValue[1];
});
return cookies;
}
var cookies = getCookies();
console.log(cookies.username);
// 輸出 "novalic"
//刪除Cookie
//設定過期時間在過去，其他屬性保持不變
document.cookie = username + "
=novalic;
Domain=.baidu.com;
path=/;
expires=一個過去的時間
Secure;
HttpOnly;
SameSite=Lax;
Priority=High
"
場景
Cookies是一種非常實用的客戶端儲存技術，在會話管理和使用者認證等廣泛使用。Cookie的管理在服務端進行，儲存在瀏覽器的Cookies儲存空間中。
注意事項
安全性：設定
HttpOnly標誌可以防止跨站指令碼攻擊（XSS）透過 JavaScript 訪問 Cookie。設定Secure標誌可以確保 Cookies 只通過 HTTPS 協議傳輸，增加安全性。容量限制：每個Cookie大小不超過4KB，每個域名下的總 Cookie 大小不超過 4KB，超過這個限制可能導致某些 Cookie 無法正常設定。
跨域問題：Cookies 只能由設定它的域名讀取，因此如果需要跨域共享 Cookies，需要使用 CORS（跨源資源共享）策略。
隱私考慮：由於 Cookies 可以被用於追蹤使用者行為，因此應該遵循 GDPR 或其他隱私法規的要求。
拓展
IndexDB
Index也是客戶端的一種儲存技術，相比於localStorage 、 sessionStorage 和 Cookies有著更加強大的儲存能力，適合儲存大量複雜的資料。
特點：
物件儲存:IndexDB允許儲存鍵值對資料，可以是任意的JS物件。
事務支援：IndexDB支援十五，可以確保一組操作要麼全部成功，要麼全部失敗。
索引：IndexDB支援建立索引來加速資料檢索。
非同步操作：IndexDB支援非同步操作，不會阻塞用戶數據。
容量：IndexDB的儲存容量比本地儲存和會話儲存大得多，通常每個站點可以達到100M甚至更多。
總之，IndexDB功能強大，但是使用難度也更大。
總結：
以上就是瀏覽器常見的儲存技術，主要是需要掌握LocalStorage、SessionStorage和Cookies，特別是對於Cookies的使用。