【组件封装】监听localStorage的变化

淩亂°似流年 2023-09-27 08:58 89阅读 0赞

### 前言： ###

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

--------------------

### 功能思路讲述 ###

![07d0be05f59940569884b68abb6a2aed.gif][]

> 这个是我封装的函数，作用是监听本地存储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;

### 完整的使用方法示例 ###

目录结构：

![8b7295605bce494e94d5ff5c6b5cd113.png][]

<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>

[07d0be05f59940569884b68abb6a2aed.gif]: https://img-blog.csdnimg.cn/07d0be05f59940569884b68abb6a2aed.gif
[8b7295605bce494e94d5ff5c6b5cd113.png]: https://img-blog.csdnimg.cn/8b7295605bce494e94d5ff5c6b5cd113.png