cookie

• 什么是cookie
  • 在客戶端的一種會話跟蹤技術,用于將網(wǎng)頁中的數(shù)據(jù)保存到瀏覽器中
• cookie的生命周期
  • 默認情況下生命周期是一次會話(瀏覽器被關閉)
  • 如果通過expires=設置了過期時間, 并且過期時間沒有過期, 那么下次打開瀏覽器還是存在
  • 如果通過expires=設置了過期時間, 并且過期時間已經(jīng)過期了,那么會立即刪除保存的數(shù)據(jù)
• cookie注意點
  • cookie默認不會保存任何的數(shù)據(jù)
  • cookie不能一次性保存多條數(shù)據(jù), 要想保存多條數(shù)據(jù),只能一條一條的設置
  • cookie有大小和個數(shù)的限制,個數(shù)限制: 20~50,大小限制: 4KB左右
• cookie作用范圍
  • 同一個瀏覽器的同一個路徑下訪問
  • 如果在同一個瀏覽器中, 默認情況下下一級路徑就可以訪問
  • 如果在同一個瀏覽器中, 想讓上一級目錄也能訪問保存的cookie, 那么需要添加一個path屬性才可以:document.cookie = "name=zs;path=/;";
  • 若二級域名與頂級域名一樣，而三級域名不一樣，需要加一個domain屬性才可以,如document.cookie = "name=zs;path=/;domain=wxm.com;";

H5新增存儲方案

• SessionStorage和LocalStorage
  • SessionStorage和LocalStorage也是用于存儲網(wǎng)頁中的數(shù)據(jù)的
• Cookie、 SessionStorage、LocalStorage區(qū)別
  • 生命周期(同一瀏覽器下)
    • Cookie生命周期: 默認是關閉瀏覽器后失效, 但是也可以設置過期時間
    • SessionStorage生命周期: 僅在當前會話(窗口)下有效，關閉窗口或瀏覽器后被清除, 不能設置過期時間
    • LocalStorage生命周期: 除非被清除，否則永久保存
  • 容量
    • Cookie容量: 有大小(4KB左右)和個數(shù)(20~50)限制
    • SessionStorage容量: 有大小限制(5M左右)
    • LocalStorage容量: 有大小限制(5M左右)
  • 網(wǎng)絡請求
    • Cookie網(wǎng)絡請求: 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題
    • SessionStorage網(wǎng)絡請求: 僅在瀏覽器中保存，不參與和服務器的通信
    • LocalStorage網(wǎng)絡請求: 僅在瀏覽器中保存，不參與和服務器的通信
  • 應用場景
    • Cookie: 判斷用戶是否登錄
    • LocalStorage: 購物車
    • sessionStorage: 表單數(shù)據(jù)
    • 無論通過以上那種方式存儲的數(shù)據(jù), 切記不能將敏感數(shù)據(jù)直接存儲到本地

// 存儲
localStorage.setItem("name", "wxm");
// 移除
sessionStorage.removeItem("name");
// 修改
sessionStorage.setItem("name", "jason");
// 獲取
value = sessionStorage.getItem("name");
// 清空
sessionStorage.clear();