Vue 监听 localstorage 变化

不会叫的狼

已于 2024-07-05 17:49:12 修改

阅读量305

点赞数 2

分类专栏： Vue 文章标签： vue.js

于 2024-07-01 00:20:20 首次发布

本文链接：https://blog.csdn.net/weixin_40017062/article/details/140088977

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

概述

对于浏览器，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载。
localStorage：与 sessionStorage 一样，但是 浏览器关闭后，数据依然会一直存在。一般的浏览器能存储的是5MB左右。

注意点：

localStorage 有效期是永久的，理论上，不人为的删除，一直存在设备中。作用域是协议、主机名、端口。
sessionStorage 有效期是浏览器的会话时间，标签页关闭后就消失了。作用域是窗口、协议、主机名、端口。
localStorage 是 window 上的。所以不需要写 this.localStorage。

方法

setItem(key, val)：保存
getItem(key)：获取
removeItem(key)：删除
clear()：清空

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>localStorage</title>
  <script src="https://cdn.staticfile.org/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div>
		<h1>{{localData}}</h1>
		<input type="text" v-model="data" />
		<button @click="setData()"> 点击设置localData </button>
	</div>
</div>
</body>
<script>
// 创建根实例
new Vue({
	el: '#app',
	data() {
		return {
			data: '',
			localData: localStorage.getItem('user')
		}
	},
	methods: {
		setData: function() {
			localStorage.setItem('user', this.data)
			console.log("this.localData=" + this.localData)
			console.log("localStorage.data=" + localStorage.getItem('user'))
		}
	},
	mounted() {
		const user = { name: 'jack', age: 18};
		localStorage.setItem('user', JSON.stringify(user))
	}
})
</script>

在这里插入图片描述

F12 => 应用程序 => 本地存储，可以看到浏览器本地存储 localStorage

📌 输入框输入 “1111”，点击按钮，控制台中 localStorage.getItem('user') 打印修改后的值，但是 this.localData 并没有响应式实时改变。
在这里插入图片描述
本地存储 localStorage 也已经修改：

在这里插入图片描述

这是为什么呢？

Vue 仅可以对其管理的数据做响应式处理，可以理解为 data 中的数据，localStorage 并不在 Vue 的管理下，自然不会有响应特性。

💦 查询资料，网上有说使用 computed 计算属性来监听本地存储数据的变化：

computed: {
  localData() {
    return localStorage.getItem('data')
  },
}

事实证明完全没用，因为localStorage 并不在 Vue 的管理下，localStorage 的变化 Vue 并不能监控到。

💦 还有说使用 watch 来监听 localStorage 中的数据变化：

watch: {
	localStorage: {
        handler(newVal, oldVal)  {
            console.log("新的值:" + newVal);
            console.log("旧的值:" + oldVal);
            console.log("hellow  world");
        },
        deep: true
    }
},

事实证明也完全没用，因为localStorage 并不在 Vue 的管理下，localStorage 的变化 Vue 并不能 watch 监控到。

通过 window 监听

1. utils目录下建 tool.js 文件

// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
function dispatchEventStroage() {
  const signSetItem = localStorage.setItem
  localStorage.setItem = function(key, val) {
    // 声明事件
    let setEvent = new Event("setItemEvent")
    setEvent.key = key
    setEvent.newValue = val
    // 派发事件
    window.dispatchEvent(setEvent)
    signSetItem.apply(this, arguments)
  }
}
 
export default dispatchEventStroage;

2. main.js中引入并挂载

import tool from "./utils/tool";
 
Vue.use(tool);

3. mounted() 方法中添加监听

mounted() {
	const user = { name: 'jack', age: 18};
	localStorage.setItem('user', JSON.stringify(user))
	
	//监听localStorage变化
	window.addEventListener("setItemEvent", (e) => {
	    // 监听需要的键名
		if (e.key === "user") {
			console.log("newValue=" + e.newValue)
			this.localData = e.newValue
		}
	})
}

图片1

vuex

Vuex 是 Vue.js 的状态管理工具。它将应用程序中共享的所有状态集中在一个 store 中。这使得跨组件通信更容易，同时还可以支持异步操作，当数据发生变化时使得组件重渲染更简单。

1. 添加store，并全局挂载

const store = new Vuex.Store({
  state() {
        return {
            userInfo: ''
        }
    },
    //mutations中编写对共享数据state的修改逻辑
    mutations: {
        saveUserInfo(state, payload) {
            state.userInfo = payload
        }
    }
});

//全局挂载
Vue.prototype.$store=store

2. 使用计算属性 computed 获取

computed: {
    count() {
        return this.$store.state.userInfo;
    }
}

📅 完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>localStorage</title>
  <script src="https://cdn.staticfile.org/vue/2.6.2/vue.min.js"></script>
  <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
	<div>
		<h1>{{localData}}</h1>
		<h1>{{count}}</h1>
		<input type="text" v-model="data" />
		<button @click="setData()"> 点击设置localData </button>
	</div>
</div>
</body>
<script>

const store = new Vuex.Store({
  state() {
        return {
            userInfo: ''
        }
    },
    //mutations中编写对共享数据state的修改逻辑
    mutations: {
        saveUserInfo(state, payload) {
            state.userInfo = payload
        }
    }
});

//全局挂载
Vue.prototype.$store=store

// 创建根实例
new Vue({
	el: '#app',
	data() {
		return {
			data: '',
			localData: localStorage.getItem('user')
		}
	},
	methods: {
		setData: function() {
			localStorage.setItem('user', this.data)
			console.log("this.localData=" + this.localData)
			console.log("localStorage.data=" + localStorage.getItem('user'))
			
			this.$store.commit('saveUserInfo', this.data);
		}
	},
	computed: {
        count() {
            return this.$store.state.userInfo;
        }
    },
    watch:{
        '$store.state.userInfo':{
            handler(newVal,oldVal){
                console.log('主界面监听Vuex',newVal,oldVal)
            }
        }
    },
	mounted() {
		const user = { name: 'jack', age: 18};
		localStorage.setItem('user', JSON.stringify(user))
		
		this.$store.commit('saveUserInfo', JSON.stringify(user));
	}
})
</script>

上述例子只是在单个文件进行演示，真正的项目中，需要将 store 放到独立的 js 文件中，main.js 中引入并挂载 store。这样，该 store 将会被所有组件共享。

当某个组件修改 localStorage 值，通过 this.$store.commit('saveUserInfo', JSON.stringify(user)); 将修改值同步到全局 store，其他组件就会实时响应修改。

localStorage和Vuex使用区别

在 Vue.js 应用程序中，组件的状态需要在多个组件中共享。如果将状态保存在组件内部，那么跨组件的通信就会变得困难。

为了实现灵活性和可维护性，需要使用状态管理器。这里的状态指的是应用程序中的可变数据。

localStorage 是 HTML5 引入的，数据是长期的，即使关闭浏览器并重新打开它，数据仍然会存在。

Vuex 是 Vue.js 的状态管理工具，它将应用程序中共享的所有状态集中在一个 store 中。这使得跨组件通信更容易，同时还可以支持异步操作，当数据发生变化时使得组件重渲染更简单。

具体区别如下：

设计目的：Vuex 旨在管理 Vue.js 应用程序中的状态，而 localStorage 则提供了一种简单的本地存储机制。
生命周期：localStorage 中保存的数据可以长期存在，除非明确清除，而 Vuex 存储的数据仅在 Vuex实例存在的生命周期内存在。
面向的对象：localStorage 面向键/值对，而 Vuex 面向状态（状态是可以作为字典键的对象）。
效率：localStorage 能存储的是5MB左右的键/值对，而 Vuex 由于是专门维护状态的库，所以无论是数据量还是读写操作都比localStorage更为高效、快速。