localStorage,SessionStorage和Cookie的操作方法

前言：

虽然使用vue只有一般都会使用`store`作为数据存储的工具，但是前端基本的数据存储在一些时候还是挺好用的，总结一下基本用法

一、基本知识

localStorage和sessionStorage

这两个属性都代表同一个Storage对象 – 一个持久化关联数组，数组使用字符串来索引，存储的值也都是字符串形式。
两者的区别在于存储的有效期和作用域的不同

通过localStorage存储的数据是永久性的，除非Web应用刻意删除存储的数据，或者用户通过设置浏览器配置（浏览器提供的特定UI）来删除，否则数据将一直存储在用户电脑，永不过期。

localStorage的作用域是限定在文档源（通过协议、主机名以及端口三者确定），同源的文档间共享同样的localStorage数据，可以互相读取对方的数据，甚至可以覆盖对方的数据。
非同源的文档间互相都不能读取或者覆盖对方的数据。
localStorage的作用域同样受浏览器供应商限制。

SessionStorage的有效期和存储数据的脚本所在的最顶层的窗口或者浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过SessionStorage存储的数据也都被删除。
SessionStorage的作用域也限定在文档源中，同时还被限定在窗口中。

cookie
cookie除了名和值，还有一些可选的属性来控制cookie的有效期和作用域
cookie默认的有效期很短，如果想延长，可以通过设置max-age属性（单位s）
cookie的作用域是通过文档源和文档路径来确定，可通过设置cookie的path属性,来确定路径

二、相关方法

localStorage

新建localStorage

const localStorageSet = (key, value) => {
    
    
 if (!key) return
 if (typeof value !== 'string') {
    
    
   value = JSON.stringfy(value)
 }
 window.localStorage.setItem(key, value)
}

export default localStorageSet

获取localStorage

const localStorageGet = (key) => {
    
    
 if (!key) return;
 return window.localStorage.getItem(key)
}

export default localStorageGet

删除localStorage

const localStorageRemove = (key) => {
    
    
 if (!key) return;
 window.localStorage.removeItem(key)
}

export default localStorageRemove

sessionStorage

新建sessionStorage

const sessionStorageSet = (key, value) => {
    
    
 if (!key) return;
 if (typeof value !== 'string') {
    
    
   value = JSON.stringify(value)
 }
 window.sessionStorage.setItem(key, value)
}

export default sessionStorageSet

获取sessionStorage

const sessionStorageGet = (key) => {
    
    
 if(!key) return;
 return window.sessionStorage.getItem(key)
}

export default sessionStorageGet

删除sessionStorage

const sessionStorageRemove = (key) => {
    
    
 if (!key) return;
 window, sessionStorage.removeItem(key)
}

export default sessionStorageRemove

cookie

新建cookie

const setCookie = (key, value, expire) => {
    
    
 const d = new Date()
 d.setDate(d.getDate() + expire)
 document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      d.toUTCString()}`
}

export default setCookie

获取cookie

const getCookie = (key) => {
    
    
 const cookieStr = decodeURIComponent(document.cookie)
 const arr = cookieStr.split('; ')
 let cookieValue = ''
 for (let i = 0; i < arr.length; i++) {
    
    
   const temp = arr[i].split('=')
   if (temp[0] === key) {
    
    
     cookieValue = temp[1]
     break
   }
 }
 return cookieValue
}

export default getCookie

删除cookie

const delCookie = (key) => {
    
    
 document.cookie = `${
      
      encodeURIComponent(key)}=;expires=${
      
      new Date()}`
}

export default delCookie

三、查看方法

application中可以查看到相关信息
在这里插入图片描述

四、参考文献

【1】JavaScript权威指南
【2】https://mp.weixin.qq.com/s/aU2LMBB9KJTinyIAybuzLg