美文网首页
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在本地缓存中读写数据

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