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

最新推荐文章于 2024-08-18 10:43:41 发布

飞飞翼

最新推荐文章于 2024-08-18 10:43:41 发布

阅读量1.3k

点赞数 2

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.csdn.net/qq_36935391/article/details/124394794

版权

VUE 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何利用good-storage插件在前端实现LocalStorage的读写操作，以存储和共享用户信息，减少不必要的HTTP请求。通过创建一个名为cache的类，实现了数据的获取和设置方法，并在组件中展示如何读取和更新存储的数据。

摘要由CSDN通过智能技术生成

使用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>