1.在 main.js 引入
/**
* @description
* @author (Set the text for this tag by adding docthis.authorName to your settings file.)
* @date 2019-05-29
* @param { number } type 1 localStorage 2 sessionStorage
* @param { string } key 键
* @param { string } data 要存储的数据
* @returns
*/
Vue.prototype.$addStorageEvent = function(type, key, data) {
if (type === 1) {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent')
const storage = {
setItem: function(k, val) {
localStorage.setItem(k, val)
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, data)
} else {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent')
const storage = {
setItem: function(k, val) {
sessionStorage.setItem(k, val)
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, data)
}
}
2.使用如下方式设置localstorage
this.$addStorageEvent(1, 'orgData', JSON.stringify(res.data))
3.在需要监听的页面 created 添加
// 监听组织信息
window.addEventListener('setItem', () => {
this.orgData = JSON.parse(localStorage.getItem('orgData'))
})