Detailed explanation of Strorage localized storage in Vue

Storage localized storage

Storage Advantages:

Larger space: 4kb cookie and 5mb storage
Save network traffic: No data is sent to the server, and it is stored locally
Quick display: Data stored locally + cache locally in the browser, much faster than getting data from the server

localStorage

Session data will be stored permanently unless manually deleted or removed Item
Data stored in all homologous windows is shared
Only string-type data can be stored, complex object data must be processed with JSON's stringfy and parse.

sessionStorage

During a session period, session data is stored, and when the current session page (browser page) is closed, the data is deleted
The stored data cannot be shared across session windows
Only string-type data can be stored, complex object data must be processed with JSON's stringfy and parse.

Storage local storage instance

Create a new one under the model folder

const storage = {
  set(key,value){
    (key,(value));
  },
  get(key){
    return ((key));
  },
  getForIndex(index){
    return (index)
  },
  getKeys(){
    let items = ();
    let keys = [];
    for(let index = 0;index<;index++){
      (items[index].key);
    }
  },
  getLength(){
    return ;
  },
  getSupport(){
    return (typeof (Storage) !== "undefined")?true:false;
  },
  remove(key){
    (key);
  },
  removeAll(){
    ();
  },
  getAll(){
    let len = ;
    let arr = [];
    for(let i=0;i<;i++){
      const getKey =  (i);
      const getVal = (getKey);
      arr[i] = {
        "key":getKey,
        "val":getVal,
      }
    }
    return arr;
  },
};
 
export default storage;

Create a store

import Vue from "vue";
import Vuex from "vuex";
import storage from "@/model/storage";
 
(Vuex);
 
const store = new ({
  state: {
    //Storage tokens    token: '',
    userName: '',
    roleId:'',
    staticRoute:[]//This is a local route  },
 
  actions: {
    setuserInfoFun(context, name){
      ('setuserInfo', name);
    },
    set_tokenFun(context, token){
      ('set_token', token)
    },
    del_tokenFun(context){
      ('del_token')
    },
    set_roleIdFun(context,id){
      ('set_roleId',id)
    },
    set_routerFun(context,route){
      ('set_router',route)
    }
  },
 
// Calculate properties  mutations: {
    // Modify the token and save the token in localStorage    set_token(state, token){
       = token;
      ('token', token);
    },
    del_token(state){
       = "";
      ('token');
    },
    setuserInfo(state, userName){
       = userName;
    },
    set_roleId(state,id){
       = id;
    },
    set_router(state,router){
       = router;
      ('route', router);
    }
  }
});
 
export default store;

The above is personal experience. I hope you can give you a reference and I hope you can support me more.