1、存储位置及类型:
Storage
是存在本地缓存;
Vuex
是存储在内存中。
localStorage
和 sessionStorage
只能存储字符串类型,对于复杂的对象可以封装storage
2、实效性:
localStorage
(本地存储)存储在本地,永久保存;
sessionStorage
(会话存储),临时保存,页面关闭即失效;
Vuex 页面刷新时会失效,因为 Vuex
是存在内存中,当页面(F5)刷新时属于清除内存,Vuex
存储的值会丢失。因此需要重新拉取解决这一问题
3、应用场景:
Vuex
用于组件之间的传值;
localStorage
,sessionStorage
则主要用于不同页面之间的传值。
有人觉得 localstorage
可以代替 Vuex
,对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage
,sessionstorage
是无法做到,
因此vuex 与 storage 配合使用才能达到最好的效果,知识整理中
封装
/**
* @description storage 封装
*/
const STORAGE_KEY = 'xiao'
// storage.setItem('a', 1)
// storage.setItem('xiao', 100, 'user')
// storage.setItem('user', { a: 1 }) value={a:1}
// storage.setItem('abc', { a: 1 }, 'user')
export default {
// JSON.stringify方法将 JavaScript 对象转换为字符串。
setItem (key, value, moduleName) {
if (moduleName) {
const val = this.getItem(moduleName)
val[key] = value
this.setItem(moduleName, val)
} else {
const val = this.getStorage()
// 添加一个字段
val[key] = value
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
}
},
// 获取摸一个模块下面的属性user下面的userName
getItem (key, moduleName) {
// 如果只有一个参数直接return {"user":{"a":1,"abc":{"a":1}},"a":1} key=user
if (moduleName) {
const val = this.getItem(moduleName)
console.log(val, moduleName)
if (val) return val[key]
}
//JSON.parse(sessionStorage.getItem('xiao'))['user'] 浏览器输入
//{"user":{"a":1,"abc":{"a":1}},"a":1} 提前写入浏览器的值
return this.getStorage()[key]
},
getStorage () {
// 方法用来解析JSON字符串
return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
},
clear (key, moduleName) {
const val = this.getStorage()
if (moduleName) {
delete val[moduleName][key]
} else {
delete val[key]
}
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
}
}