美文网首页
Vue--LocalStorage在本地缓存中读写数据

Vue--LocalStorage在本地缓存中读写数据

作者: 兔子不打地鼠打代码 | 来源:发表于2018-06-06 16:06 被阅读4862次

使用LocalStorage将一些无关安全问题的用户信息保存在本地,方便一次请求之后多页面共用数据,可以减少浏览器的get请求。

1.安装good-storage插件

cnpm i good-storage --save

2.读/写的方法

common/js/cache.js:

import storage from 'good-storage'

class cache {
  constructor(key, session) {
    this.key = key;
    if (session) {
      this.storage = storage.session;
    } else {
      this.storage = storage;
    }
  }

  get(defaultValue = null) {
    return this.storage.get(this.key, defaultValue);
  }

  set(value) {
    this.storage.set(this.key, value);}
}

let prefix = (window.version ? window.version + "_" : '') +"self_";
const USER_CACHE_KEY = prefix + 'user';
export const USER_CACHE = new cache(USER_CACHE_KEY);

3、组件中调用

3.1读取数据

<script>
import {ORDER_CACHE} from "../../lib/cache";
...........
 getUser(){
        let user={};
        user.patientName =USER_CACHE.get().patientName;
        user.patientId= USER_CACHE.get().patientId;
        this.user =user;
      },
</script>

3.2新增数据

<script>
import {ORDER_CACHE} from "../../lib/cache";
...........
save(item){
        let localArr={};
        //获取此时本地LocalStorage的所有信息
        localArr=ORDER_CACHE.get();
        //注意参数的先后顺序,后面一个obj会覆盖前一个。
        localArr=Object.assign({},localArr,item);
        //将新的object传到LocalStorage里
        ORDER_CACHE.set(localArr);
        //
      }
</script>

相关文章

  • Vue--LocalStorage在本地缓存中读写数据

    使用LocalStorage将一些无关安全问题的用户信息保存在本地,方便一次请求之后多页面共用数据,可以减少浏览器...

  • 线程安全

    在多线程程序中,如果多个线程同时对同一个对象进行读写,由于读写操作会在内存中先复制一份缓存数据,修改完缓存数据后再...

  • 有关iOS 缓存

    缓存 在众多可以本地保存数据的技术中,有三种脱颖而出:URL缓存、数据模型缓存(利用NSKeyedArchiver...

  • 04 | 单体架构看缓存

    单体应用的架构 Nginx; Tomcat; MySQL; 本地缓存 在 Tomcat 的内存中缓存数据,每个 T...

  • 利用zookeeper即时更新本地缓存

    本地缓存 当系统中需要有一些基础数据时,往往会使用本地缓存将这些数据缓存在内存中,以减少对数据库的查询,提升系统性...

  • Redis(六)-缓存方案-一致性

    概述 本节学习下“缓存 + 数据库”模型读写的一致性问题,比如,缓存中是否有可能被写入脏数据,策略的读写性能如何,...

  • Redis缓存

    作用: 提高网站效率,降低数据库的读写次数,引入缓存技术 定义:缓存就是中内存中存储数据备份,当数据没有发生本质改...

  • redis常见问题及处理机制

    Redis 简介 数据库 redis数据在内存中,读写速度快,广泛用于缓存方向为什么要使用缓存(redis) ->...

  • js 数组对象去重问题

    1、问题阐述 在做列表数据的时候,本地缓存数据数组,在请求到新数据以后需要添加到本地缓存中并显示到列表,其中比...

  • 微信小程序:将本地缓存数据存储到云数据库,再将云数据库数据恢复到

    云函数代码,其中两个方法: 存储本地缓存数据 获取最新的本地缓存数据 将本地存储数据上传到云数据库: 先获取本地缓...

网友评论

      本文标题:Vue--LocalStorage在本地缓存中读写数据

      本文链接:https://www.haomeiwen.com/subject/qrybsftx.html