vue全局挂载缓存-good-storage

前言

vue做数据缓存有多种方案，如：good-storage，localStorage ，本文使用good-storage作为缓存，good-storage是一个插件，需要安装

在命令行安装

npm install good-storage

封装

这里需要注意一下，这里有两种方法暴露方式，引用的时候也是不一样的，需要注意！下文全局挂载的时候会说明

集中暴露

//注意Cookies和Session这里面的数据虽然全局可以通过以下方式可以操作，
// 但是界面不刷新的话这些便更的数据无法在界面上做到响应式
import Storage from 'good-storage'
const localStorage = {
    CookiesPut: function (key, value) {
        return Storage.set(key, value)
    },
    CookiesGet: function (key) {
        return Storage.get(key)
    },
    CookiesClear: function () {
        return Storage.clear()
    },
    CookiesRemove: function (key) {
        return Storage.remove(key)
    },
    SessionPut: function (key, value) {
        return Storage.session.set(key, value)
    },
    SessionGet: function (key) {
        return Storage.session.get(key)
    },
    SessionClear: function () {
        return Storage.session.clear()
    },
    SessionRemove: function (key) {
        return Storage.session.remove(key)
    }
}

export default localStorage;

单独暴露

//Cookies
export function CookiesPut(key, value) {
    return Storage.set(key, value)
}
export function CookiesGet(key) {
    return Storage.get(key)
}
export function CookiesClear() {
    return Storage.clear()
}
export function CookiesRemove(key) {
    return Storage.remove(key)
}


//Session
export function SessionPut(key, value) {
    return Storage.session.set(key, value)
}
export function SessionGet(key) {
    return Storage.session.get(key)
}
export function SessionClear() {
    return Storage.session.clear()
}
export function SessionRemove(key) {
    return Storage.session.remove(key)
}

全局挂载

在main.js中编码
集中暴露式

import localStorage from './utils/dataStorage'
Vue.prototype.$LocalStorage=localStorage;

界面中使用

单独暴露式

import {
  setToken,
  isLogin,
  removeToken,
  SessionPut,
  SessionGet,
  SessionClear,
  SessionRemove,
  CookiesClear,
  CookiesGet,
  CookiesPut,
  CookiesRemove
} from './utils/dataStorage'

Vue.prototype.$removeToken = removeToken;
Vue.prototype.$SessionPut = SessionPut;
Vue.prototype.$SessionGet = SessionGet;
Vue.prototype.$SessionClear = SessionClear;
Vue.prototype.$SessionRemove = SessionRemove;
Vue.prototype.$CookiesClear = CookiesClear;
Vue.prototype.$CookiesGet = CookiesGet;
Vue.prototype.$CookiesPut = CookiesPut;
Vue.prototype.$CookiesRemove = CookiesRemove;

浏览器存储效果