前端關於cookies ， sessionStorage 和localStorage 的區別及使用

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據 - 通常經過加密
cookie數據始終在同源的http請求中攜帶，即使不需要，也會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

存儲大小：
cookie數據大小不能超過4K
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

有效時間：
localStorage:存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
sessionStorage:數據在當前瀏覽器窗口關閉後自動刪除
cookie：設置的cookie過期時間前一直有效，即使窗口和瀏覽器關閉

用法

 localstorage 和 sessionstorage

首先要判斷瀏覽器是否支持 localStorage / sessionStorage
比如判斷 localStorage

if (window.localStorage) {
    alert('瀏覽支持 localStorage');
} else {
    alert('瀏覽暫不支持 localStorage');
}

localStorage 和 sessionStorage 都具有相同的操作方法，例如 setItem()、getItem() 和 removeItem() 等

儲存數據
用途: 將 value 存儲到 key 字段
用法: setItem( key, value)
代碼示例

sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

注: 如果需要儲存數組或對象的話, 可以用JSON格式傳入

取出數據
用途: 獲取指定 key 本地存儲的值
用法: getItem(key)
代碼示例

sessionStorage.getItem('key');
localStorage.getItem('key');

修改數據
用途: 修改指定 key 本地存儲的值
用法: setItem(key)
代碼示例

sessionStorage.setItem('key', 'newVal');
localStorage.setItem('key', 'newVal');

刪除數據
用途: 刪除指定 key 本地存儲的值
用法: removeItem(key)
代碼示例

sessionStorage.removeItem('key');
localStorage.removeItem('key');

清除數據
用途: 清除所有本地存儲的數據
用法: clear()
代碼示例

sessionStorage.clear();
localStorage.clear();

cookie

儲存數據

window.document.cookie = 'key=val';

取出數據

document.cookie

example:

// 設置 Cookie
setCookie(key, val, days) {
    let date = new Date(); // 獲取時間
    date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days);
    // 字符串拼接 Cookie
    window.document.cookie = `${key}=${val};path=/;expires=${date.toGMTString()};`;
}

 

// 獲取 Cookie
getCookie() {
    let cookie = document.cookie.split(';');
}

 

// 清除Cookie
clearCookie() {
    this.setCookie('', '', -1);
}