前言
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;