vue全局挂载缓存-good-storage

前言

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

在命令行安装

npm install good-storage

封装

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

集中暴露

//对浏览器的Cookies和Session  可以参考https://www.cnblogs.com/houzheng/p/9067110.html
//注意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;

在这里插入图片描述

浏览器存储效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员劝退师-TAO

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值