vue监听缓存数据(localStorage) 中值的更新

news2025/1/24 17:58:24

2个vue组件之间数据同步,可以通过监听localStorage数据变化,来改变数据的值。

方法:可以重写localStorage的setItem方法,当调用setItem方法设置新值的时候,会new Event('setItemEvent')   用window.dispatchEvent()这个方法来派发一个事件,让window去监听

以下demo实现的是 一个页面获取诗句  然后将获取的数据用localStorage存储起来  另一个页面进行监听   一旦数据发生改变   则控制台打印  ‘值改变了’  并将新值打印出来

实现步骤:

1.先在src下新建utils文件夹,新建tools.js,写一个dispatchEvent派发事件 如:utils/tools.js

代码如下:

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里面全局引入tools,并use  以便二个vue组件能够触发派发事件

import tools from './utils/tool.js'
Vue.use(tool)

3.这里我写了一个index.vue页面   将sendSentences.vue组件和watchSentences.vue组件引进来好看效果

<template>
  <div>
    <h3>主页面</h3>
    <watchSentences/>
    <sendSentences/>
  </div>
</template>

<script>
// import axios from 'axios'
import watchSentences from './watchSentences.vue'
import sendSentences from './sendSentences.vue'

export default {
  components: {
    watchSentences, sendSentences
  }

}
</script>

4.在一个vue组件当中向localStorage存储数据  这里是将获取到的诗句存储起来

 sendSentences.vue组件

methods: {
    getSentences() {
      axios({
        url: 'https://api.apiopen.top/api/sentences'
      }).then(res => {
        this.sentencesTitle = res.data.result.from
        this.sentences = res.data.result.name
        window.localStorage.setItem('gsStorename', JSON.stringify(this.sentences))
      })
    }
  }

5.在另一个vue组件当中监听localStorage数据变化,来赋值,监听要写在mounted ()中,这里将打印‘值改变了’,并将每次变化后的新值打印出来了 代码如下

  watchSentences.vue组件

 mounted() {
    // 监听localhostStorage的数据变化,结合utils/tool.js配合使用
    window.addEventListener('setItemEvent', function(e) {
      const newdata = JSON.parse(e.newValue)
      console.log('值改变了',newdata)
    })
  }

6.完结

效果:

 

 参考自:vue中通过监听localStorage数据变化,实现2个vue组件之间的数据同步_lizige2008的博客-CSDN博客_localstorage setitem 同步

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407898.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue 项目兼容 IE 浏览器

前言 : 网上 找了很多关于 vue项目兼容 IE 浏览器的 教程步骤 , 写的 非常详细 , 但根据我自己的项目,怎么找 都没有找到 webpack.base.conf.js 这个文件 ,就没办法配置 因为 vue-cli最新版本原因 , 隐藏了配置文件, 所有的 都在 vue.config.js中配置 可以根据自己的 vue-cli 版…

手摸手带你玩转Vue3——Vue2升级Vue3

今年年初&#xff0c;尤大大公布了一个重磅消息&#xff0c;将Vue3作为Vue的默认版本。 这无疑不是对我们开发人员的内卷煽风点火&#xff01; vue默认版本改动意味着&#xff0c;官方将会把Vue研发重心放到vue3上&#xff0c;vue2也开始走下坡路&#xff0c;至于淘汰过时只是…

前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗,以及已有样式的覆盖

vue3使用element-plus实现登录/注册页面登录/注册页面组件预览添加忘记密码弹窗预览已有样式的修改1.字体大小2.router-link默认样式登录/注册页面组件 vue3 的登录和注册页面 目前只有框架和函数框架, 根据具体需要填充, 已有功能: 1.没有勾选同意使用手册, 登录和注册按钮是…

后端返回各种图片形式在前端的转换及展示

一、 接口返回的图片显示如下所示&#xff1a;&#xff08;在控制台看的&#xff09;返回的是这个图片&#xff08;二进制&#xff09; 可是&#xff0c;在 打印的时候&#xff0c;返回的却是 出现问题的原因的axios 默认返回的是 json 文本形式&#xff0c;二进制图片数据被强…

TS复习-----TS中的函数

目录 一、ts函数的定义 二、ts中定义函数传参 1.函数传参方法 2.可选参数 3.默认参数 4.剩余参数 函数重载 一、ts函数的定义 函数是一种特殊的对象&#xff0c;可以被调用。TS 里的函数和原生&#xff0c;ES 6 里的函数差不太多&#xff0c;只是多了一些其他功能。 //…

HTML入门学习笔记+详细案例

✨HTML入门学习笔记详细案例 作者介绍: &#x1f393;作者:偷偷敲代码的青花瓷&#x1f431;‍&#x1f680; &#x1f440;作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩&#x1f9…

实现H5和小程序之间相互跳转

功能描述&#xff1a; 1、 当点击理赔服务的时候&#xff0c;跳转到小程序页面 2、 当点击返回的时候&#xff0c;从小程序跳回H5页面&#xff08;内嵌H5以及关闭小程序&#xff09; 功能1&#xff1a;H5跳转小程序 vue中实现步骤 在 template 标签中写html <wx-open-lau…

【Maven】maven安装、IDEA创建maven的web项目、添加依赖、集成Tomcat

学习目录前言maven简介maven的下载与安装优化配置参数1.修改本地仓库路径2.设置阿里云私服镜像3.指定JDK版本IDEA创建第一个maven的web项目IDEA集成TomcatHello java&#xff01;前言 朋友们在写后端的过程中&#xff0c;遇到功能复杂的业务时需要导入不同的jar包&#xff0c;…

Logging system failed to initialize using configuration from ‘classpathlogbacklogback-spring.xml‘

2021-12-31&#xff1a; 项目在Windows系统上可以正常运行,然而移到Mac系统上运行出现一下报错!! 据报错信息显示,初始化“logback-spring.xml”失败,监测到“Logback”配置出错,非法的声明异常, 创建“[/apps/logs/sns_error.log]”的父目录失败… 主要原因是初始化配置文…

[暑假]Vue生命周期-笔记

什么是生命周期? 生命周期: 又名: 生命周期回调函数, 生命周期函数, 生命周期钩子. 所谓的生命周期函数, 就是Vue在关键时刻帮我们调用的一些特殊名称的函数 生命周期函数的名字不可更改, 但是函数的具体内容是程序员根据需求编写的 生命周期函数中的 this 指向是 vm 或 组件…

CSS样式:渐变色圆角边框

目录预期效果解决方法1.两层元素&#xff1a;外层渐变背景圆角内边距&#xff0c;里层圆角背景色2.伪元素&#xff1a;background-clip属性伪元素定位元素本身背景&#xff08;以伪元素背景色做边框&#xff09;3.单层元素&#xff1a; background-clipbackground-iamgebackgro…

PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)

一、 官网下载pdf.js &#xff1a;Getting Started 注意&#xff1a; 这俩包 都不支持ie&#xff0c;因为用的是es6&#xff0c;ie解析不出来 下完以后引进去。下面为省事 找几个市面上常用的方法&#xff1a; 1、文件流转base64的 这是在自己的js请求里面 //PDFdata 是a…

Nginx超时配置

Nginx主要有四类超时设置&#xff1a;客户端超时设置、DNS解析超时设置、代理超时设置&#xff0c;如果使用ngx_lua&#xff0c;则还有lua相关的超时设置。 1&#xff0e;客户端超时设置 对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、…

vue项目 升级依赖包

项目维护过程中&#xff0c;可能会因为依赖包存在漏洞而升级依赖&#xff0c;或者因为需要高本版中提供的新特性而升级依赖。 在升级依赖之前&#xff0c;可以先执行 npm outdated 命令&#xff0c;查看当前哪些已安装软件包版本过时了。 标签释义current代表当前版本号want…

【面试】什么是网关/服务网关?网关/服务网关的作用是什么?

文章目录一、前言二、网关2.1 什么是网关&#xff1f;2.2 网关的作用是什么&#xff1f;2.3 网关的工作流程2.4 软件系统网关三、什么是服务网关四、为什么需要服务网关五、服务网关应用一、前言 对于网关&#xff0c;从专业角度&#xff0c;一般运维和网络管理员会比较了解一…

vant官网-vant ui 首页-移动端Vue组件库

Vant 是有赞前端团队开源的移动端vue组件库&#xff0c;适用于手机端h5页面。 鉴于百度搜索不到vant官方网址&#xff0c;分享一下vant组件库官网地址&#xff0c;方便新手使用 vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/ 通过 npm 安装 在现有项目中使用 V…

【JavaScript】JS实用案例分享:输入智能提示 | 打字机输出效果

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&am…

前端Vue之发布订阅模式

目录 1.什么是发布订阅模式 2.实现简单的发布订阅 3.收集更新函数 4.触发更新函数 5.总结 一个响应式数据可能会有多个视图部分都需要依赖&#xff0c;也就是响应式数据变化之后&#xff0c;需要执行的更新函数可能不止一个&#xff0c;对于这种情况&#xff0c;有必要学习…

node使用管理神器NVM安装配置超详细步骤(window10)

使用NVM对node进行版本管理前言一、什么是nvm&#xff1f;二、nvm下载安装配置1.下载2.nvm解压安装3.检查环境变量4.确认安装成功5.设置和安装node5.1 设置淘宝镜像5.2 安装node指定版本并使用5.2.1 执行以下命令自动安装指定版本的node和npm&#xff1a;5.2.2 查看已经安装的n…

Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动&#xff08;打造企业级音乐App&#xff09;Vue3.0项目——打造企业级音乐App&#xff08;一&#xff09;Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App&#xff08;二&#xff09;图片懒加载、…