iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何监听页面缓存事件
  • 228
分享到

vue如何监听页面缓存事件

2024-04-02 19:04:59 228人浏览 独家记忆
摘要

目录监听页面缓存事件事情的起因是这样的监听缓存事件代码在main创建缓存事件在组件生命周期中在组件业务代码监听页面缓存事件 事情的起因是这样的 项目中需要用到websocket,在网

监听页面缓存事件

事情的起因是这样的

项目中需要用到websocket,在网页刚打开的时候,就要进行对话的连接绑定,就我这菜鸟来说,第一次这么搞事情,也是刚接触WEBSocket没多久,这咋整啊?在App.Vue中设置了绑定,所有的信息返回都在app.vue组件里面,但是其他组件怎么去获取?而且需要缓存到本地。而当初我还没接触vuex,所以在其他组件里面获取服务器返回的信息只能借助于localStorage,这就郁闷了,这缓存咋监听呀?

首先在main.js里面配置vue原型:

Vue.prototype.resetSetItem = (key, newVal) => {
  if (key === 'websocketHistory') {
    // 创建一个StorageEvent事件
    let newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: (k, val) => {
        localStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    };
    return storage.setItem(key, newVal);
  }
};

这个时候,在其他页面写入缓存就不能直接用localStorage了

你需要这么设置

this.resetSetItem('websocketHistory', data);

然后在需要监听的页面中,created函数中使用

window.addEventListener('setItem', () => {
  console.log(JSON.parse(localStorage.getItem('websocketHistory')));     
});

如此,便能在app.vue组件中使用获取服务器返回的信息并存入缓存,在其他组件,比如回话列表页面就可以实时更新列表,包括对话页面。

监听缓存事件代码

随着H5的更新,前端经常使用本地存储进行交互处理数据,如果想要监听缓存的变化,以下代码就是您想要的。

在main创建缓存事件

// 监听缓存事件
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(
                    "storageItem",
                    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);
    }
};

在组件生命周期中

监听缓存事件并取值

    window.addEventListener(
      "stotageItem",
      (e) => { // e代表存储的数据 { a:1 }
        jsON.parse(e.a)
      },
      false
    );

在组件业务代码

进行缓存使用

 this.$addStorageEvent(0, "useStorage", 
    // 写入数据
    JSON.stringify({ a:1 })
 );

以上就是全部代。仅为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何监听页面缓存事件

本文链接: https://www.lsjlt.com/news/147893.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何监听页面缓存事件
    目录监听页面缓存事件事情的起因是这样的监听缓存事件代码在main创建缓存事件在组件生命周期中在组件业务代码监听页面缓存事件 事情的起因是这样的 项目中需要用到websocket,在网...
    99+
    2024-04-02
  • jQuery如何监听页面滚动事件?
    这篇文章将为大家详细讲解有关jQuery如何监听页面滚动事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery监听页面滚动事件 前言 jQuery提供了一种简单的方法来监听页面滚动事件,从而在页...
    99+
    2024-04-02
  • jQuery如何监听页面重定向事件?
    这篇文章将为大家详细讲解有关jQuery如何监听页面重定向事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用 jQuery 监听页面重定向事件 jQuery 提供了多种方法来监听页面重定向事件。以下...
    99+
    2024-04-02
  • vue监听页面滚动事件怎么配置
    在Vue中监听页面滚动事件,可以通过在`mounted`钩子函数中添加滚动事件监听器。具体步骤如下:1. 在Vue组件中添加一个监听...
    99+
    2023-09-20
    vue
  • javascript如何监听页面刷新和页面关闭事件
    这篇文章主要介绍了javascript如何监听页面刷新和页面关闭事件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在我们的日常生活中,时常遇...
    99+
    2024-04-02
  • jQuery如何监听页面资源加载事件?
    这篇文章将为大家详细讲解有关jQuery如何监听页面资源加载事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery监听页面资源加载事件 jQuery提供了一种便捷的方式来监听页面资源加载事件,以...
    99+
    2024-04-02
  • vue监听滚动事件如何实现滚动监听
    这篇文章主要为大家展示了“vue监听滚动事件如何实现滚动监听”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue监听滚动事件如何实现滚动监听”这篇文章吧。在vu...
    99+
    2024-04-02
  • js如何监听html页面的上下滚动事件
    这篇文章将为大家详细讲解有关js如何监听html页面的上下滚动事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近在一个项目中,在写前端页面的时候,想像以前做Andro...
    99+
    2024-04-02
  • vue关闭页面时如何去掉监听
    这篇文章主要介绍了vue关闭页面时如何去掉监听的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue关闭页面时如何去掉监听文章都会有所收获,下面我们一起来看看吧。在使用 Vue.js 开发 web 应用程序过程中...
    99+
    2023-07-06
  • vue如何使用监听事件 v-on
    这篇文章主要介绍了vue如何使用监听事件 v-on,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。代码:问题:如何将button和counte...
    99+
    2024-04-02
  • jQuery如何监听事件?
    ...
    99+
    2024-04-02
  • vue中如何监听键盘回车事件
    这篇文章将为大家详细讲解有关vue中如何监听键盘回车事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:<...
    99+
    2024-04-02
  • vue监听页面滚动到某个高度触发事件流程
    目录监听页面滚动到某个高度触发事件动态监听页面滚动高度监听页面滚动到某个高度触发事件 methods: {    showIcon() {       if (         !!...
    99+
    2024-04-02
  • vue怎么监听页面滚动到某个高度触发事件
    本篇内容主要讲解“vue怎么监听页面滚动到某个高度触发事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么监听页面滚动到某个高度触发事件”吧!监听页面滚动到某个高度触发事件methods...
    99+
    2023-06-30
  • JavaScript如何监听嵌套页面
    随着Web应用程序的发展,越来越多的网站开始采用嵌套页面的方式来呈现数据,例如嵌套一个iframe来显示另一个网站的内容。在这种情况下,如何在JavaScript中有效地监听嵌套页面的事件呢?首先,我们需要了解一些基本概念。在Web开发中,...
    99+
    2023-05-21
  • 如何解决vue页面缓存问题
    这篇文章给大家分享的是有关如何解决vue页面缓存问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。比如有一个列表页面,然后列表每项都有一个详情,之前用vue1.x的时候,页面缓存...
    99+
    2024-04-02
  • vue如何使用keep-alive缓存页面
    这篇文章主要介绍vue如何使用keep-alive缓存页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!keep-alive缓存页面比如在表单输入页面进入下一步后,再返回上一步到表单页时要保留表单输入的内容、比如在列...
    99+
    2023-06-26
  • jQuery如何监听动画事件?
    这篇文章将为大家详细讲解有关jQuery如何监听动画事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery监听动画事件 jQuery提供了多种方法来监听动画事件,这些事件可以帮助你检测动画何时开...
    99+
    2024-04-02
  • jQuery如何监听错误事件?
    这篇文章将为大家详细讲解有关jQuery如何监听错误事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery监听错误事件 1. 错误处理 在JavaScript中,错误处理是通过try...cat...
    99+
    2024-04-02
  • javascript如何设置事件监听
    这篇文章主要介绍“javascript如何设置事件监听”,在日常操作中,相信很多人在javascript如何设置事件监听问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”java...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作