Vue操作Storage本地化存储


Posted in Vue.js onApril 29, 2022

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<items.length;index++){
      keys.push(items[index].key);
    }
  },
  getLength(){
    return sessionStorage.length;
  },
  getSupport(){
    return (typeof (Storage) !== "undefined")?true:false;
  },
  remove(key){
    sessionStorage.removeItem(key);
  },
  removeAll(){
    sessionStorage.clear();
  },
  getAll(){
    let len = sessionStorage.length;
    let arr = [];
    for(let i=0;i<len.length;i++){
      const getKey =  sessionStorage.key(i);
      const getVal = sessionStorage.getItem(getKey);
      arr[i] = {
        "key":getKey,
        "val":getVal,
      }
    }
    return arr;
  },
};
 
export default storage;

创建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;

Tags in this post...

Vue.js 相关文章推荐
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
vue里使用create, mounted调用方法
vue elementUI批量上传文件
Apr 26 #Vue.js
vue.js 使用原生js实现轮播图
Apr 26 #Vue.js
如何vue使用el-table遍历循环表头和表体数据
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
jQuery动态添加
2016/04/07 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
python pymysql库的常用操作
2020/10/16 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
自荐书范文
2013/12/08 职场文书
学校运动会霸气口号
2014/06/07 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
出差报告格式模板
2014/11/06 职场文书
心术观后感
2015/06/11 职场文书
门球健将观后感
2015/06/16 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python