vue监听localstorage

在 Vue 中监听 `localStorage` 的变化并不是一件直接的事情，因为 `localStorage` 是浏览器提供的存储机制，并不在 Vue 的响应式系统管理范围内。不过可以通过一些技巧实现监听 `localStorage` 的变化。 ### 1. 重写 `localStorage.setItem` 方法并派发事件 可以通过重写 `localStorage.setItem` 方法，并在设置值时派发一个自定义事件，从而实现监听 `localStorage` 变化的目的。 ```javascript // utils/tool.js function dispatchEventStorage() { const originalSetItem = localStorage.setItem; localStorage.setItem = function (key, val) { const event = new Event("setItemEvent"); event.key = key; event.newValue = val; window.dispatchEvent(event); originalSetItem.apply(this, arguments); }; } export default dispatchEventStorage; ``` 在 `main.js` 中引入并调用这个函数： ```javascript // main.js import tool from "./utils/tool"; tool(); ``` 然后在组件中监听自定义事件： ```javascript mounted() { window.addEventListener("setItemEvent", (e) => { if (e.key === "user") { console.log("新的值：" + e.newValue); this.localData = e.newValue; } }); } ``` ### 2. 使用 `storage` 事件监听跨页签变化 如果需要监听跨页签的 `localStorage` 变化，可以使用浏览器提供的 `storage` 事件： ```javascript mounted() { window.addEventListener("storage", (e) => { if (e.key === "user") { console.log("跨页签修改了 localStorage，新值：" + e.newValue); this.localData = e.newValue; } }); } ``` 需要注意的是，`storage` 事件仅在**其他页签**中修改 `localStorage` 时触发，在当前页签内修改 `localStorage` 不会触发该事件[^2]。 ### 3. 使用 Vue3 Composition API 实现监听 在 Vue3 的组合式 API 中，可以结合 `watch` 和自定义 `useStorage` 函数实现监听： ```javascript import { watch } from "vue"; import { useStorage } from "../store/useStorage"; watch(useStorage("stationId"), (newValue, oldValue) => { console.log("stationId 发生了变化：" + newValue); }); ``` ### 4. 在 Vue2 中手动更新并触发监听 在 Vue2 中，当修改 `localStorage` 时，可以通过手动触发事件或更新组件状态来实现监听。例如，在组件中更新 `localStorage`： ```javascript methods: { handleSelectTree(item) { let obj = JSON.parse(localStorage.getItem("ReallyUserinfo")); obj.organId = item.organId; obj.organName = item.organName; localStorage.setItem("ReallyUserinfo", JSON.stringify(obj)); this.localData = obj.organId; // 手动更新组件状态 } } ``` ### 总结 在 Vue 中监听 `localStorage` 的变化，可以通过以下几种方式实现： - 重写 `localStorage.setItem` 并派发事件； - 使用浏览器的 `storage` 事件监听跨页签变化； - 在 Vue3 中结合 `watch` 和 `useStorage` 实现监听； - 在 Vue2 中通过手动更新状态实现监听。 这些方法可以根据实际需求选择使用，确保在 Vue 应用中能够有效地监听 `localStorage` 的变化。

可以使用Vue的watch来监听localStorage的变化。具体实现如下： ```javascript // 在Vue组件中 watch: { '$store.state.localStorageKey': function (newVal, oldVal) { // 处理localStorage变化的逻辑 } } ``` 其中`$store.state.localStorageKey`是一个Vuex状态，它对应了localStorage中的某个key。当localStorage中该key的值发生变化时，watch函数就会被触发。