快捷導(dǎo)航

Vue監(jiān)聽localstorage變化的方法詳解

更新時(shí)間：2023年10月10日 10:07:31 作者：Best_Liu~

在日常開發(fā)中,我們經(jīng)常使用localStorage來存儲(chǔ)一些變量,這些變量會(huì)存儲(chǔ)在瀏覽中,對(duì)于localStorage來說,即使關(guān)閉瀏覽器,這些變量依然存儲(chǔ)著,方便我們開發(fā)的時(shí)候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽localstorage的變化,需要的朋友可以參考下

一. 說明

在日常開發(fā)中，我們經(jīng)常使用localStorage來存儲(chǔ)一些變量。這些變量會(huì)存儲(chǔ)在瀏覽中。對(duì)于localStorage來說，即使關(guān)閉瀏覽器，這些變量依然存儲(chǔ)著，方便我們開發(fā)的時(shí)候在別的地方使用。

二. localStorage的使用

存儲(chǔ)值：window.localStorage.setItem(‘鍵名’, 值)
讀取值：window.localStorage.getItem('‘鍵名’)

三. 監(jiān)聽localStorage值的變化

1.在utils中新建一個(gè)文件watchLocalStorage.ts

export default 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)
		// eslint-disable-next-line prefer-rest-params
		signSetItem.apply(this, arguments)
	}
}

2. 在main.js中引入并掛載

import dispatchEventStroage from './utils/watchLocalStorage'
Vue.use(dispatchEventStroage);

3.在需要監(jiān)聽的地方使用如下代碼

mounted () {
      // 監(jiān)聽localhostStorage的數(shù)據(jù)變化，結(jié)合utils/tool.js配合使用
      const that=this 
      window.addEventListener('setItemEvent', function (e) {
        if (e.key === 'myKey') {   // myKey是需要監(jiān)聽的鍵名
          that.mykey = e.newValue;
          console.log(JSON.parse(e.newValue))   // 這里的newValue就是localStorage中，鍵名為myKey對(duì)應(yīng)的變化后的值。
          console.log('本地存儲(chǔ)值發(fā)生變化：', e.newValue)
        }
      })
    },

特別注意：

我剛開始做的時(shí)候，考慮不周，沒有寫const that=this 這一句，我用的如下代碼，一直報(bào)錯(cuò)，賦值不了，如下代碼是錯(cuò)誤的，

為什么要用const that=this這一個(gè)呢？

那是因?yàn)樵贘avaScript中，this代表的是當(dāng)前對(duì)象，他是會(huì)隨程序運(yùn)行不停改變的，如果用this的話，this是addEventListener監(jiān)聽中當(dāng)前的對(duì)象，所以賦值的時(shí)候不能賦值到外面去。const that = this 其實(shí)就是在this改變之前先復(fù)制一份給that，那么在程序后面的運(yùn)行中就可以用that來賦值該函數(shù)以外的對(duì)象了，比如that.order

四.另外提供一種方法 vuex

利用 const that=this，可以將值存進(jìn)store中，

this.od2Visible = true;
    this.title = '艦船航線規(guī)劃';
    this.$store.commit("tools/setzhk", 'od5');
    var tempList = [];
    const that = this;
    var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas); // 創(chuàng)建鼠標(biāo)事件handler
    handler.setInputAction(function(click) { // 監(jiān)聽鼠標(biāo)左鍵點(diǎn)擊事件
        // 獲取點(diǎn)擊位置的地球坐標(biāo)
        var cartesian = window.viewer.camera.pickEllipsoid(click.position, window.viewer.scene.globe.ellipsoid);
        // 轉(zhuǎn)換為笛卡爾坐標(biāo)系 
        let cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
        // 轉(zhuǎn)換為經(jīng)緯度
        var latitude = Cesium.Math.toDegrees(cartographic1.latitude);
        var longitude = Cesium.Math.toDegrees(cartographic1.longitude);
        tempList.push(longitude,latitude)
          if (cartesian) {
              var entity = window.viewer.entities.add({ // 在該位置添加點(diǎn)
                  position: cartesian,
                  point: {
                      pixelSize: 10,
                      color: Cesium.Color.YELLOW
                  }
              });
          }
          localStorage.setItem('lonlan',tempList)
          that.$store.commit("tools/setlonlat", tempList);
          console.log(1001,that)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

然后再使用用計(jì)算屬性 computed 和 watch 監(jiān)聽實(shí)現(xiàn)

computed: {
    lonlat(){
      return this.$store.state.tools.lonlat
    }
  },
  watch: {
    lonlat(newVal,oldVal){
      console.log(1002,newVal,oldVal)
    }
  },

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

您可能感興趣的文章: