How to operate localStorage, SessionStorage and Cookie

Foreword:

Although using vue is only generally used storeas a tool for data storage, the basic front-end data storage is still very useful at some times. Let’s summarize the basic usage

1. Basic knowledge

• localStorage和sessionStorage

Both properties represent the same Storage object - a persistent associative array indexed by strings, and the stored values ​​are also strings.
The difference between the two lies in the storage validity period and scope

The stored localStoragedata is permanent. Unless the web application deletes the stored data deliberately, or the user deletes it by setting the browser configuration (specific UI provided by the browser), the data will always be stored on the user's computer and will never expire.

localStorageThe scope is limited to the document source (determined by the protocol, host name and port). Documents of the same source share the same localStorage data, and can read each other's data and even overwrite each other's data.
Non-same-source documents cannot read or overwrite each other's data.
localStorageThe scope of is also limited by the browser vendor.

---

SessionStorageThe validity period is the same as the topmost window or browser tab where the script storing the data is located. Once the window or tab is permanently closed, all SessionStoragedata passed through the store is also deleted.
SessionStorageis also scoped to the document source, and is also scoped to the window.

• In addition to the name and value of the cookie
  cookie , there are some optional attributes to control cookiethe validity period and scope.
  cookieThe default validity period is very short. If you want to extend it, you can set the scope of max-agethe attribute (unit s)
  cookieto determine the document source and document path. pathThe path can be determined by setting the attributes of the cookie

2. Related methods

• localStorage

New localStorage

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

export default localStorageSet

Get localStorage

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

export default localStorageGet

delete localStorage

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

export default localStorageRemove

• sessionStorage

New sessionStorage

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

export default sessionStorageSet

get sessionStorage

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

export default sessionStorageGet

delete sessionStorage

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

export default sessionStorageRemove

• cookie

new 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

get 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

delete cookies

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

export default delCookie

3. View method

The relevant information can be viewed in the application

4. References

【1】JavaScript authoritative guide
【2】https://mp.weixin.qq.com/s/aU2LMBB9KJTinyIAybuzLg