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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php 面向对象的一个例子
2011/04/12 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
JS实现小米轮播图
2020/09/21 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python根据时间获取周数代码实例
2019/09/30 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Delphi笔试题
2016/11/14 面试题
个人找工作的自我评价
2013/10/17 职场文书
电视节目策划方案
2014/05/16 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
反腐倡廉标语
2014/06/24 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
运动员入场前导词
2015/07/20 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL