快捷導(dǎo)航

JS組件封裝之監(jiān)聽localStorage的變化

更新時(shí)間：2022年09月08日 08:38:57 作者：接著奏樂接著舞。

這篇文章主要介紹了JS組件封裝之監(jiān)聽localStorage的變化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言：

由于在平時(shí)開發(fā)中，經(jīng)?；虿唤?jīng)常的用到一些功能或插件或函數(shù)，回頭找起來還挺麻煩，我的想法是我直接將他們?nèi)康姆庋b成一個(gè)個(gè)的組件，做到“”拿來即用“”且該組件必須經(jīng)過測試確實(shí)可用才行，于是我新創(chuàng)建了一個(gè)vue項(xiàng)目，基于"vue": "^2.6.14"，用它來測試組件是否正常，因?yàn)槲襳ue2/3 ,react hooks 之類的都在用，這里就以vue2作為基礎(chǔ)了，后續(xù)我的想法是多做幾個(gè)版本。

功能思路講述

這個(gè)是我封裝的函數(shù)，作用是監(jiān)聽本地存儲(chǔ)localStorage的變化，當(dāng)設(shè)置localStorage時(shí)可以監(jiān)聽它的變化并將值保存到變量中，實(shí)現(xiàn)響應(yīng)式。

這個(gè)函數(shù)最核心之處其實(shí)是JavaScript的一個(gè)方法dispatchEvent，意思是派發(fā)事件，主動(dòng)的給DOM事件，具體的使用方法可以查看紅寶書，我記得他的參數(shù)有16個(gè)，可以好好看看這個(gè)，我之前拿它做無頭瀏覽器來著。

組件內(nèi)容：

找一個(gè).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;

完整的使用方法示例

目錄結(jié)構(gòu)：

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

到此這篇關(guān)于監(jiān)聽localStorage的變化的文章就介紹到這了,更多相關(guān)監(jiān)聽localStorage的變化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: