Web前端存儲之 cookie、sessionStorage 和 localStorage

Web前端存儲之 cookie、sessionStorage 和 localStorage

一、cookie

客戶端的 cookie 主要通過 key=value 的形式用於存儲 web 頁面的用戶信息等，當瀏覽器從服務器上請求 web 頁面時， 屬於該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。存儲數據大小大約是：4 K

用法

各個字段說明：

name: key值
value: value值
expires: 過期時間，GMT 是以格林威治標准時間來判斷，不受本地時區影響。若不設置有效期或設置有誤未被識別，則默認永久
path: 可以訪問 cookie 的路徑
domain：為可以訪問此cookie的域名
size：設置cookie的大小
http：cookie 的httponly屬性。若為true，則只有在http請求頭中會帶有此cookie的信息，而不能通過document.cookie來訪問此cookie
secure：設置是否只能通過https來傳遞此條cookie

1. 創建cookie

document.cookie="username=yyy;expires=Sat, 03 Jul 2021 08:40:00 GMT; path=/"

2. 讀取cookie

// 以下語句獲取的是所有在有效期內的cookie字符串

let cookies = document.cookie

3. 修改cookie

// 修改 cookie 類似於創建 cookie，舊的 cookie 將被覆蓋

document.cookie="username=ypf;expires=Sat, 03 Jul 2021 08:40:00 GMT; path=/"

4. 刪除cookie

// 刪除 cookie 只需要設置 expires 參數為以前的時間即可。當刪除時不必指定 cookie 的值

document.cookie="username=ypf;expires=Sat, 03 Jul 2021 08:00:00 GMT; path=/"

封裝 cookie 操作方法

/*
 * @Date: 2021-07-03 19:44:27
 * @information: cookie 封裝方法
 */

var CookieUtil = {
  /**
   * 設置cookie
   * @param key key值
   * @param value value值
   * @param exp 有效時長 毫秒級的時間戳格式 默認當天23:59:59過期
   */
  setCookie: function (key, value, exp) {
    if (!key) return;
    let curDate = new Date()
    // 當前時間戳
    let curStamp = curDate.getTime()
    let leftTime = new Date()
    if (exp) {
      leftTime.setTime(curStamp + exp)
    } else {
      // 當前日期
      let curDay = curDate.toLocaleDateString()
      // 當日0點之前的時間戳
      let nowDayPassedStamp = 0
      nowDayPassedStamp = new Date(curDay).getTime() - 1
      // 當日已過去的時間戳
      let passedStamp = curStamp - nowDayPassedStamp
      // 當日剩余時間戳
      let leftStamp = 24 * 60 * 60 * 1000 - passedStamp
      leftTime.setTime(curStamp + leftStamp)
    }
    // 創建cookie
    document.cookie = key + '=' + value + ';expires=' + leftTime.toGMTString() + ';path=/'
  },

  /**
   * 獲取cookie
   */
  getCookie: function (key) {
    if (!key) return;
    let cookieStr = document.cookie.replace(/\s/g, '')
    let cookieArr = cookieStr.split(';')
    for (let i = 0; i < cookieArr.length; i++) {
      let keyArr = cookieArr[i].split('=')
      if (keyArr[0] == key) return keyArr[1]
    }
  },

  /**
   * 刪除cookie
   */
  removeCookie: function (key) {
    let time = new Date(0) - 1
    this.setCookie(key, '', time)
  }
}

二、storage

對瀏覽器來說，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，而且容量更大，它包含兩種：localStorage 和 sessionStorage。存儲數據大小一般都是：5 MB

sessionStorage（臨時存儲）

為每一個數據源維持一個存儲區域，在瀏覽器的此標簽頁打開期間存在，包括此標簽頁的頁面重新加載

localStorage（長期存儲）

與 sessionStorage 一樣，但是瀏覽器關閉后，數據依然會一直存在

用法

sessionStorage 和 localStorage 的用法基本一致，引用類型的值需要轉換成 JSON 進行存儲

1. 保存數據到本地

let obj = {
    name: 'xiaoming',
    age: 18,
    birthday: '2000-01-01',
}

sessionStorage.setItem('userInfo', JSON.stringify(obj))

localStorage.setItem('userInfo', JSON.stringify(obj))

// 注：若第二次存儲的 key 值與第一次存儲的 key 值相同，則會覆蓋第一次的值

2. 從本地讀取數據

let obj1 = JSON.parse(sessionStorage.getItem('userInfo'))

let obj2 = JSON.parse(localStorage.getItem('userInfo'))

3. 從本地刪除指定 key 值

sessionStorage.removeItem('userInfo')

localStorage.removeItem('userInfo')

4. 清空存儲的所有值

sessionStorage.clear()

localStorage.clear()