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-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 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 array_merge下进行数组合并的代码
2008/07/22 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php安装swoole扩展的方法
2015/03/19 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
JS前端加密算法示例
2016/12/22 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
django 消息框架 message使用详解
2019/07/22 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
工会换届选举方案
2014/05/21 职场文书
计划生育标语
2014/06/23 职场文书
建筑节能汇报材料
2014/08/22 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
JS实现简单九宫格抽奖
2022/06/28 Javascript
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL