瀏覽器緩存總結(cookie、localStorage、sessionStorage)

般用來存儲用戶信息,每次請求的時候內容都會自動被傳遞給服務器。不同瀏覽器對於cookie的大小並不統一,一般都是4-10kb。Cookie可以設置時效。注意,cookie比較浪費帶寬,不建議寫入太多內容,這也是前端性能優化的一點

  • 操作瀏覽器對象

    //設置
     -//設置cookie
      document.cookie = "userId=nick123" 
     -//設置過期時間
      document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"
     -//設置所屬路徑,默認當前頁面路徑
      document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user" 
     -//設置cookie域
      document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com" 
    
    //讀取
     -//獲取所有cookie
      const cookies = document.cookie 
     -//使用正則讀取指定名稱的cookie
      function getCookieValue(name) {
        let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
        return result ? result.pop() : ""
      } 
     -//不使用正則讀取指定cookie
      function getCookieValue(name) {
        const nameString = name + "="
        const value = document.cookie.split(";").filter(item => {
          return item.includes(nameString)
        })
        if (value.length) {
          return value[0].substring(nameString.length, value[0].length)
        } else {
          return ""
        }
      }
    //修改
     -//已覆蓋的方式修改
      document.cookie = "userId=new_value"
    //刪除
      document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"
    
  • 使用npm庫

    npm i js-cookie -S
    
    import Cookies from 'js-cookie'
    //設置cookie
    Cookies.set('foo', 'bar')
    //設置過期時間
    Cookies.set('name', 'value', { expires: 7 })
    //設置所屬路徑
    Cookies.set('name', 'value', { expires: 7, path: '' })
    //讀取
    Cookies.get('name') 
    //讀取所有
    Cookies.get()
    //讀取所屬域下的cookie
    Cookies.get('foo', { domain: 'sub.example.com' }) 
    //刪除
    Cookies.remove('name')
    
localStorage

localstorage會把內容一直存在瀏覽器,直到清除瀏覽器的緩存。注意,沒有清除瀏覽器緩存,數據會永久存儲在瀏覽器。Localstorage一般在5M左右

localStorage.setItem(key,value)  保存數據
localStorage.getItem(key)        獲取數據
localStorage.removeItem(key)     刪除數據
localStorage.clear();            刪除全部數據
sessionStorage

跟localStorage一樣,只不過sessionStorage的生命週期跟同源窗口有關,就是說當前同一個源下面的只要有一個窗口沒關或者跳到另外的窗口,sessionStorage都會存在。sessionStorage大小也是5M左右

sessionStorage.setItem(key,value)  保存數據
sessionStorage.getItem(key)        獲取數據
sessionStorage.removeItem(key)     刪除數據
sessionStorage.clear();            刪除全部數據
參考

https://www.jianshu.com/p/8e86bf912b0e

https://juejin.im/post/5d8c33cb5188255a12365056

https://github.com/js-cookie/js-cookie

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章