Vue中的Strorage本地化存储详解

目录

• Storage本地化存储
• localStorage
• sessionStorage
• Strorage本地存储实例
• 在model文件夹下面新建一个storage.js
• 创建store

Storage本地化存储

存储优点：

• 空间更大：cookie为4kb，storage为5mb
• 节省网络流量：不会发送数据到服务器，直接存储在本地
• 快速显示：存储在本地的数据+浏览器本地的缓存，比从服务器获取数据快得多

localStorage

• 会永久存储会话数据，除非手动删除或者removeItem
• 在所有的同源的窗口中存储的数据是共享的
• 只能存储字符串类型的数据，复杂的对象数据必须借助JSON的stringfy和parse处理

sessionStorage

• 在一个会话期内，存储会话数据，当关闭当前的会话页面（浏览器页面）时，数据就删除了
• 存储的数据各会话窗口无法共享
• 只能存储字符串类型的数据，复杂的对象数据必须借助JSON的stringfy和parse处理 

Strorage本地存储实例

在model文件夹下面新建一个storage.js

const storage = {
  set(key,value){
    sessionStorage.setItem(key,JSON.stringify(value));
  },
  get(key){
    return JSON.parse(sessionStorage.getItem(key));
  },
  getForIndex(index){
    return sessionStorage.key(index)
  },
  getKeys(){
    let items = this.getAll();
    let keys = [];
    for(let index = 0;index 
 

创建store

import Vue from "vue";
import Vuex from "vuex";
import storage from "@/model/storage";
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state: {
    //  存储token
    token: '',
    userName: '',
    roleId:'',
    staticRoute:[]//这个是本地路由
  },
 
  actions: {
    setuserInfoFun(context, name){
      context.commit('setuserInfo', name);
    },
    set_tokenFun(context, token){
      context.commit('set_token', token)
    },
    del_tokenFun(context){
      context.commit('del_token')
    },
    set_roleIdFun(context,id){
      context.commit('set_roleId',id)
    },
    set_routerFun(context,route){
      context.commit('set_router',route)
    }
  },
 
//  计算属性
  mutations: {
    //  修改token，并将token存入localStorage
    set_token(state, token){
      state.token = token;
      storage.set('token', token);
    },
    del_token(state){
      state.token = "";
      storage.remove('token');
    },
    setuserInfo(state, userName){
      state.userName = userName;
    },
    set_roleId(state,id){
      state.roleId = id;
    },
    set_router(state,router){
      state.staticRoute = router;
      storage.set('route', router);
    }
  }
});
 
export default store;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。