本地儲存（2019/1/2）

1 cookie

• 使用者端儲存請求資訊的機制
• 分號分割的多個key-value欄位
• 儲存在本地的加密檔案裡
• 域名和路徑的限制

1.1 常見引數

• name：cookie名稱
• domain：cookie生效的域名
• path：cookie生效的路徑
• expires：cookie過期時間
• HttpOnly：使用者端不可更改

1.2 程式碼演示

/ 檢視cookie
document.cookie

// 新增cookie
document.cookie = "name=sc;domain=happymmall.com;path=/index.html;expires=Wed, 02 Jan 2019 13:25:59 GMT"
 


//修改cookie
document.cookie = "name=sc2;domain=happymmall.com;path=/index.html"

// 刪除cookie：把時間改為過去時間
document.cookie = "name=sc1;domain=happymmall.com;path=/index.html;expires=Wed, 02 Jan 2000 13:25:59 GMT"

2 session

• 服務端儲存請求資訊的機制
• sessionId通常存放在cookie
• 會話由瀏覽器控制，會話結束，session失效

3 localStorage

只為前端展示使用，如儲存記錄購物車選中了什麼，不會和後端互動

• H5新特性
• 有域名限制，不存在作用域概念
• 只有key-value
• 沒有過期時間
• 瀏覽器關閉後不消失

3.1 程式碼演示

// 新增localStorage
window.localStorage.setItem('name', 'sc');

// 檢視localStorage
window.localStorage.getItem('name');

// 刪除localStorage
window.localStorage.removeItem('name');

//清理快取：
window.
 
localStorage.clear()

3.2 注意事項

localStorage儲存JSON時會把JSON儲存為字串，所以需要對字串進行轉換，下面是一些常用方法：

• 使用jQuery：$.parseJSON(jsonstr);
• 使用瀏覽器自帶的轉換方式（Firefox，chrome，opera，safari，ie）：JSON.parse(jsonstr);
• JSON.stringify(json);
• Javascript支援的轉換方式：eval(’(’ + jsonstr + ‘)’);
• JSON官方的轉換方式：json.js，stringify()和parse()

4 sessionStorage

• 和localStorage相似
• 瀏覽器關閉後消失

4.1 程式碼演示

// 新增sessionStorage
window.sessionStorage.setItem('name', 'sc');

// 檢視sessionStorage
window.sessionStorage.getItem('name');

// 刪除sessionStorage
window.sessionStorage.removeItem('name');

//清理快取：
window.sessionStorage.clear()