脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js监听localStorage

JS组件封装之监听localStorage的变化

 更新时间：2022年09月08日 08:38:57   作者：接着奏乐接着舞。  
这篇文章主要介绍了JS组件封装之监听localStorage的变化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言：

由于在平时开发中，经常或不经常的用到一些功能或插件或函数，回头找起来还挺麻烦，我的想法是我直接将他们全部的封装成一个个的组件，做到“”拿来即用“”且该组件必须经过测试确实可用才行，于是我新创建了一个vue项目，基于"vue": "^2.6.14"，用它来测试组件是否正常，因为我vue2/3 ,react hooks 之类的都在用，这里就以vue2作为基础了，后续我的想法是多做几个版本。

功能思路讲述

这个是我封装的函数，作用是监听本地存储localStorage的变化，当设置localStorage时可以监听它的变化并将值保存到变量中，实现响应式。

这个函数最核心之处其实是JavaScript的一个方法dispatchEvent，意思是派发事件，主动的给DOM事件，具体的使用方法可以查看红宝书，我记得他的参数有16个，可以好好看看这个，我之前拿它做无头浏览器来着。

组件内容：

找一个.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;

完整的使用方法示例

目录结构：

<template>
  <div>
    <h2>测试页面</h2>
    <h4>{{value}}</h4>
  </div>
</template>
 
<script>
  import dispatchEventStroage from '@/utils/tools'
export default {
  data () {
    return {
      value:"000",
      num:1
    }
  },
  mounted () {
    let _this = this
    dispatchEventStroage("title")
    window.addEventListener("setItemEvent", function (e) {
    if (e.key === "title") {
      console.log(e.newValue)
      _this.value = e.newValue
    }
  })
    setInterval(()=>{
      this.num += 1
      localStorage.setItem("title",this.num);
    },1000)
  }
}
</script>
 
<style>
</style>

到此这篇关于监听localStorage的变化的文章就介绍到这了,更多相关监听localStorage的变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论