vue中动态监听localStorage值的变动

最新推荐文章于 2024-08-09 10:40:27 发布
最新推荐文章于 2024-08-09 10:40:27 发布
阅读量5.1k 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leo_DLi/article/details/106333598
版权

这个博客中有个思路, 通过重写localStorage的setItem方法来实现实时更新

但是, 文章息乎不全, 记录下来, 以后有计划参考优化下.

传送门

Leo_DLi
关注
详解vuex结合localstorage动态监听storage的变化
12-12
需求：不同组件间共用同一数据，当一个组件将数据发生变化时，其他组件也可以响应该变化。 分析：vue无法监听localstorage的变化。localstorage主要用于不同页面间传值，vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据（vuex在页面刷新的时候存储的值会丢失，localstorage存储在本地浏览器中），可以采用vuex+localstorage的方式。 关于vuex和storage的区别 1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地 2.应用场景：vuex用于组件之间的传值，localstora
vue监听localStorage变化
weixin_43920582的博客
03-10 3445
min.js重写localStorage方法 var orignalSetItem = localStorage.setItem; localStorage.setItem = function(key,newValue){ // 要监听的key为styleList if(key === "styleList"){ var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; window
自定义事件监听 & LocalStorage 事件监听
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-09 754
基本概念与作用1. 自定义事件2. LocalStorage 事件监听示例一：创建自定义事件示例二：自定义事件在组件间的通信示例三：使用 LocalStorage 存储数据示例四：监听 LocalStorage 变化示例五：综合应用功能使用思路多种场景下的应用使用技巧在现代前端开发中，事件监听是一种非常重要的交互方式。它不仅限于浏览器默认提供的点击、滑动等事件，还可以通过自定义事件来实现更复杂的业务逻辑。此外，随着Web存储技术的发展，成为了客户端存储的一种常见选择。但是，如何在数据发生变化时得到通知呢？
# vue 项目中监听 localStorage的变化，（非父子组件除过传值，获取数据变化）
weixin_46041064的博客
07-27 1156
vue 项目中监听 localStorage的变化，（非父子组件除过传值，获取数据变化） first : main.js 中给 Vue.protorype 注册一个全局方法，然后创建一个 StorageEvent 方法，当我在执行sessionStorage.setItem(k, val) 的时候，初始化事件并派发事件。 Vue.prototype.$addStorageEvent = function (key, data) { // 创建一个StorageEvent事件 var newS
vue中如何监听localStorage值的变化
风如也的博客
10-05 3697
vue中监听localStorage值的变化
vue中监听localStorage中的值
I_Do_Well的博客
05-18 544
重写localStorage.setItem事件当使用setItem的时候触发 window.dispatchEvent派发事件。
火狐浏览器无法重写localStorage的setItem，从而实现对localStorage数据变动的监听
qq_41411483的博客
05-10 1969
火狐浏览器无法重写localStorage的setItem 最近在公司维护项目时，遇到一个问题，如下代码所示（已经简化）: /** 主要实现对setItem的重写，实现对localStorage数据变动的监听 */ var signSetItem = localStorage.setItem; localStorage.setItem = function (key, newValue) { var setItemEvent = new Event("setItemEvent"); se
vue中的一些知识
zy的博客
01-26 1048
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
Vue开发中的一些常见套路和技巧（上）
HTML网页设计
08-08 370
首先通过props中注册的value属性，注意必须为value,其实就是使用$emit抛出一个名字为input（必须）的事件，将需要修改的值传递进去，那么就可以在负组件中通过v-model指令进行数据的绑定了。porps: {value: {}}$emit('input', 回馈的内容)复制代码我现在大多数时候，都觉得当使用 Vue 后，很容易触摸到瓶颈。当我想在进行深层次的时候却发现前方的路非常的窄小。大部分时间都是在做一些熟能生巧的东西。...
2023年最新的Vue全套面试题（含答案）
热门推荐
xm1037782843的博客
03-06 14万+
前端Vue面试题 最新面试题 最全的面试题vue
Vue中常见的面试题及知识点
DJxyyy的博客
11-13 983
前端Vue常见的面试题 掌握以下的Vue面试题 面试如虎添翼 请耐心看完 1 . MVC、MVP与MVVM模式 MVC： MVC是应用最广泛的软件架构之一，一般MVC分为： Model（ 模型 ）、Controller（ 控制器 ）、View（ 视图 ）。 这主要是基于分层的目的，让彼此的职责分开。View 一般通过 Controller 来和 Model 进行联系。Controller是 Model 和 View 的协调者，View和Model不直接联系。基本联系都是单向的。 1、View 传送指令
详解vue中localStorage的使用方法
12-09
什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage 1.sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 2.localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是: 当我们首次访问设置Cookie的页
vue中如何监听localStorage中值的变化
du_aitiantian的博客
06-30 4734
在日常开发中，我们经常使用localStorage来存储一些变量。这些变量会存储在浏览中。对于localStorage来说，即使关闭浏览器，这些变量依然存储着，方便我们开发的时候在别的地方使用。
vue 监听localStorage 的值
kurcp的博客
08-23 373
vue监听localStorage的值
vue 如何监听localStorage内的数据变化
小先生编程
01-11 4579
vue 如何监听localStorage内的数据变化，这个问题百度了好久，都没有特别好的例子。 解决方式：我们在往localStorage 内设置值的时候，同时也往store内设置一个，这样我们监听store内的值变化就可以实现了实时监听。 watch：{ '$store.getters.lang': function(newlang){ // 业务代码 } } vue 如何使用Store.js呢：它是Vuex内的，我还没有深入研究它， https://vuex.vuejs.org/zh/guid
Vue2里监听localstorage里值的变化
qq_37635012的博客
08-31 1479
window全局监听localStorage的setItem事件以及时更新，如果key是我们本地缓存里ReallyUserinfo的属性值变化那就能监听到了，从而可以执行我们想要的操作。首先，我们在src下的libs文件夹下新建一个stroage.js用于重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件。
vue页面监听localstorage_监听history.push/replaceState和local/sessionStorage变化
weixin_35827472的博客
02-03 1184
前端路由我们都已经很熟悉了，像Vue、React等一些MVVM框架都提供了前端路由支持，使得前端开发更加独立高效。前端路由的原理我们都知道，一般面试的时候也经常会被问起。我们一般都会回答：前端路由有两种，一种是 hash 模式，原理是监听 window 上的 onhashchange 事件来实现视图更新，一种是 history 模式，原理是使用 history.pushState/replaceS...
vue项目动态监听localStorage或sessionStorage中数据的变化
qq_53142442的博客
04-12 3160
这里写自定义目录标题vue项目动态监听localStorage或 sessionStorage中数据的变化1、首先在main.js中给Vue.prototype注册一个全局方法，然后创建一个StorageEvent方法，当我们执行sessionStorage.setItem(k,val)的时候，初始化时间并派发事件。2、在组件A中调用，写入缓存3、在组件B中监听 vue项目动态监听localStorage或 sessionStorage中数据的变化 1、首先在main.js中给Vue.prototype注册
vue使用watch监听localStorage中数据
05-31
可以通过使用 `watch` 选项监听 localStorage 中的数据变化，具体实现如下： ```js watch: { // 监听 localStorage 中的数据变化 myData: { handler: function (newValue, oldValue) { // 处理数据变化 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值