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如何循环提取对象数组中的值
Nov 18 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
浅析Ajax语法
2016/12/05 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python基于property()函数定义属性
2020/01/22 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
大一新生期末自我评价
2014/09/12 职场文书
党员对照检查材料
2014/09/22 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技