馃敟馃敟浠�涔堬紵LocalStorage 涔熻兘琚洃鍚紵涓轰粈涔堟垜璇曚簡鍗翠笉琛岋紵

Sailing
9,055 闃呰8鍒嗛挓

寮曡█锛氭渶杩戯紝鍥㈤槦鐨勪紮浼撮渶瑕佸疄鐜扮洃鍚� localStorage 鏁版嵁鍙樺寲锛屼絾寮�鍙戜腑鍗村彂鐜版棤娉曠洿鎺ョ洃鍚��/p>

鍦ㄥ洟闃熺殑涓�涓箒閲嶉」鐩腑锛屾垜浠彂鐜颁竴涓柊鍔熻兘鐨勫疄鐜版垚鏈緢澶э紝鍥犳寮�濮嬫�濊�冿細鑳藉惁閫氳繃瀹炴椂鐩戝惉 LocalStorage 鐨勫彉鍖栧苟鑷姩瑙﹀彂鐩稿叧鎿嶄綔銆傛垜浠皾璇曚娇鐢� addEventListener 鏉ョ洃鍚� localStorage 鐨勫彉鍖栵紝浣嗕护浜烘剰澶栫殑鏄紝杩欑鏂规硶浠呭湪涓嶅悓娴忚鍣ㄦ爣绛鹃〉涔嬮棿鏈夋晥锛岃�屽湪鍚屼竴鏍囩椤靛唴鍗存棤娉曞疄鐜扮洃鍚�傝繖鏄�庝箞鍥炰簨锛�/p>

缁忚繃璋冪爺浜嗚В鍒帮紝娴忚鍣ㄧ‘瀹炴彁渚涗簡 storage 浜嬩欢鏈哄埗锛屼絾瀹冧粎閫傜敤浜庡悓婧愮殑涓嶅悓鏍囩椤典箣闂淬�傚浜�strong>鍚屼竴鏍囩椤靛唴鐨� LocalStorage 鍙樺寲锛屽嵈娌℃湁鐩存帴鐨勬柟娉曟潵瀹炵幇瀹炴椂鐩戝惉銆傛渶鍒濓紝鎴戜滑鑰冭檻浣跨敤 setInterval 杩涜瀹氭椂杞鏉ヨ幏鍙栧彉鍖栵紝浣嗚繖绉嶆柟寮忚涔堝鑷存�ц兘寮�閿�杩囧ぇ锛岃涔堟棤娉曠涓�鏃堕棿鎹曟崏鍒板彉鍖栥��/p>

浠婂ぉ锛屾垜浠帰璁ㄤ笅鍑犵楂樻晥涓斿疄鐢�/strong>鐨勮В鍐虫柟妗堬紝鏄惁鍙互甯姪杞绘澗搴斿LocalStorage杩欑鐩戝惉闇�姹傦紵甯屾湜瀵逛綘鏈夋墍甯姪锛屾湁鎵�鍊熼壌锛�/p>

浼犵粺鏂规鐨勭棝鐐桂煄煄�/h3>

鍏堟潵鐪嬬湅娴忚鍣ㄦ槸濡備綍甯姪鎴戜滑澶勭悊涓嶅悓椤电鐨� LocalStorage 鍙樺寲锛�/p> 

window.addEventListener("storage", (event) => {      
  if (event.key === "myKey") {
    // 鎵ц鐩稿簲鎿嶄綔
  }
});

閫氳繃鐩戝惉 storage 浜嬩欢锛屽綋鍦ㄥ叾浠栭〉绛句慨鏀� LocalStorage 鏃讹紝浣犲彲浠ュ湪褰撳墠椤电鎹曡幏鍒拌繖涓彉鍖栥�備絾闂鏄細杩欑鏂规硶鍙�傜敤浜庤法椤电鐨� LocalStorage 淇敼锛屽湪鍚屼竴椤电涓嬫棤娉曡Е鍙戣浜嬩欢銆備簬鏄紝寰堝寮�鍙戣�呭紑濮嬪姹傛浛浠ｆ柟妗堬紝姣斿锛�/p>

1銆�strong>杞锛圥olling锛�/strong>

杞鏄竴绉嶆渶鐩磋鐨勬柟寮忥紝瀹冨畾鏈熸鏌� localStorage 鐨勫�兼槸鍚﹀彂鐢熷彉鍖栥�傜劧鑰岋紝杩欑鏂规硶鎬ц兘杈冨樊锛屽挨鍏跺湪楂橀杞鏃朵細瀵规祻瑙堝櫒鎬ц兘浜х敓杈冨ぇ鐨勫奖鍝嶏紝鍥犳涓嶉�傚悎浣滀负闀挎湡鏂规銆�/p> 

let lastValue = localStorage.getItem('myKey');

setInterval(() => {
  const newValue = localStorage.getItem('myKey');
  if (newValue !== lastValue) {
    lastValue = newValue;
    console.log('Detected localStorage change:', newValue);
  }
}, 1000); // 姣忕妫�鏌ヤ竴娆�/span>

杩欑鏂瑰紡瀹炵幇绠�鍗曪紝涓嶄緷璧栧鏉傛満鍒躲�備絾鏄�ц兘杈冨樊锛岄绻佽疆璇細褰卞搷娴忚鍣ㄦ�ц兘銆�/p>

2銆�strong>鐩戝惉浠ｇ悊锛圥roxy锛夋垨鍙戝竷-璁㈤槄妯″紡

杩欑鏂瑰紡閫氳繃鍒涘缓涓�涓唬鐞嗘潵鎷︽埅 localStorage.setItem 鐨勮皟鐢ㄣ�傛瘡娆℃暟鎹彉鏇存椂锛屾垜浠墜鍔ㄥ彂甯冧竴涓簨浠讹紝閫氱煡鍏朵粬鐩戝惉鑰呫��/p> 

(function() {
  const originalSetItem = localStorage.setItem;
  const subscribers = [];

  localStorage.setItem = function(key, value) {
    originalSetItem.apply(this, arguments);
    subscribers.forEach(callback => callback(key, value));
  };

  function subscribe(callback) {
    subscribers.push(callback);
  }

  subscribe((key, value) => {
    if (key === 'myKey') {
      console.log('Detected localStorage change:', value);
    }
  });

  localStorage.setItem('myKey', 'newValue');
})();

杩欑姣旇緝鐏垫椿锛屽彲浠ョ敤浜庡鏉傚満鏅�備絾鏄渶瑕佹墜鍔ㄦ嫤鎴� setItem锛岀淮鎶ゆ垚鏈珮锛堜絾涔熸槸鍊煎緱鎺ㄨ崘鐨勶級銆�/p>

鐒惰�岋紝杩欎簺鏂规寰�寰�瀛樺湪鎬ц兘闂鎴栬�呭紑鍙戠殑澶嶆潅搴︼紝鍦ㄩ珮棰戞暟鎹洿鏂扮殑鎯呭喌涓嬶紝鏈変竴瀹氱殑鎬ц兘闂锛岃�屼笖瀛樺湪涓�瀹氱殑椋庨櫓鎬с�傞偅涔堟湁娌℃湁鍙互绠�鍗曞揩閫燂紝椋庨櫓鎬ц繕灏忕殑鏂规鍛紵

楂樻晥鐨勮В鍐虫柟妗� 馃殌馃殌

鏃㈢劧娴忚鍣ㄤ笉鏀寔鍚屼竴椤电鐨� storage 浜嬩欢锛屾垜浠彲浠�strong>鎵嬪姩瑙﹀彂浜嬩欢锛屼互姝ゆ潵瀹炵幇鍚屼竴椤电涓嬬殑 LocalStorage 鍙樺寲鐩戝惉銆�/p>

1銆佽嚜瀹氫箟 Storage 浜嬩欢

閫氳繃鎵嬪姩瑙﹀彂 StorageEvent锛屼綘鍙互鍦� LocalStorage 鏇存柊鏃跺悓姝ュ垎鍙戜簨浠讹紝浠庤�屽疄鐜板悓涓�椤电涓嬬殑鐩戝惉銆�/p> 

localStorage.setItem('myKey', 'value');

// 鎵嬪姩鍒涘缓骞跺垎鍙� StorageEvent
const storageEvent = new StorageEvent('storage', {
  key: 'myKey',
  url: window.location.href
});
window.dispatchEvent(storageEvent);

浣犲彲浠ヤ娇鐢ㄧ浉鍚岀殑鐩戝惉閫昏緫鏉ュ鐞嗘暟鎹彉鍖栵紝鏃犺鏄悓涓�椤电杩樻槸涓嶅悓椤电锛�/p> 

window.addEventListener("storage", (event) => {
  if (event.key === "myKey") {
    // 澶勭悊 LocalStorage 鏇存柊
  }
});

杩欑瀹炵幇绠�鍗曘�佽交閲忋�佸揩鎹枫�備絾鏄渶瑕佹墜鍔ㄨЕ鍙戜簨浠躲��/p>

2銆佸熀浜� CustomEvent 鐨勮嚜瀹氫箟浜嬩欢

涓� StorageEvent 绫讳技锛屼綘鍙互浣跨敤 CustomEvent 鎵嬪姩鍒涘缓骞跺垎鍙戜簨浠讹紝瀹炵幇 localStorage 鐨勫悓姝ョ洃鍚��/p> 

localStorage.setItem('myKey', 'newValue');

const customEvent = new CustomEvent('localStorageChange', {
  detail: { key: 'myKey', value: 'newValue' }
});
window.dispatchEvent(customEvent);

杩欑鏂瑰紡閫傚悎鏇村姞鐏垫椿鐨勪簨浠惰Е鍙戝満鏅��code>CustomEvent涓嶅眬闄愪簬 localStorage 浜嬩欢锛屽彲浠ユ墿灞曞埌鍏朵粬鍔熻兘銆�/p> 

window.addEventListener('localStorageChange', (event) => {
  const { key, value } = event.detail;
  if (key === 'myKey') {
    console.log('Detected localStorage change:', value);
  }
});

3銆丮essageChannel锛堟秷鎭�氶亾锛�/h4>

MessageChannel API 鍙互鍦ㄥ悓涓�涓祻瑙堝櫒涓婁笅鏂囦腑鍙戦�佸拰鎺ユ敹娑堟伅銆傛垜浠彲浠ラ�氳繃 MessageChannel 灏� localStorage 鐨勫彉鍖栦俊鎭悓姝ュ埌鍏朵粬閮ㄥ垎锛岃捣鍒扮被浼间簨浠剁洃鍚殑鏁堟灉銆�/p> 

const channel = new MessageChannel();

channel.port1.onmessage = (event) => {
  console.log('Detected localStorage change:', event.data);
};

localStorage.setItem('myKey', 'newValue');
channel.port2.postMessage(localStorage.getItem('myKey'));

閫傚悎缁勪欢閫氫俊鍜屽鏉傚簲鐢ㄥ満鏅紝娑堟伅鏈哄埗杈冧负鐏垫椿銆傜浉瀵瑰鏉傜殑瀹炵幇锛屽彲鑳戒笉閫傚悎绠�鍗曞満鏅��/p>

4銆丅roadcastChannel

BroadcastChannel 鎻愪緵浜嗕竴绉嶆洿楂樼骇鐨勬祻瑙堝櫒閫氫俊鏈哄埗锛屽厑璁稿涓獥鍙ｆ垨椤甸潰涔嬮棿骞挎挱娑堟伅銆備綘鍙互閫氳繃杩欎釜鏈哄埗灏� localStorage 鍙樻洿鍚屾鍒板涓〉闈㈡垨鍚屼竴椤甸潰鐨勪笉鍚岄儴鍒嗐��/p> 

const channel = new BroadcastChannel('storage_channel');

channel.onmessage = (event) => {
  console.log('Detected localStorage change:', event.data);
};

localStorage.setItem('myKey', 'newValue');
channel.postMessage({ key: 'myKey', value: 'newValue' });

鏀寔璺ㄩ〉闈㈤�氫俊锛屾柟渚垮湪涓嶅悓椤甸潰闂村悓姝ユ暟鎹紝鏄撲簬瀹炵幇銆傞�傜敤鍦烘櫙杈冧负鍏蜂綋锛岄�氬父鐢ㄤ簬澶嶆潅鐨勯〉闈㈤�氫俊闇�姹傘��/p>

杩�柟娉曪紝涓绘墦鐨勫氨鏄竴涓缂濇彃閽堬紝绠�鍗曞揩閫燂紝椋庨櫓鎬т綆銆備絾鏄瑙傝搴︽潵璁诧紝姣忕鏂规閮芥槸鏈夊悇鑷紭鍔跨殑銆�/p>

浼樺娍瀵规瘮

鏂规浼樼偣缂虹偣閫傜敤鍦烘櫙
杞瀹炵幇绠�鍗曪紝閫傚悎浣庨鐩戞帶闇�姹�/td>鎬ц兘宸紝棰戠箒杞褰卞搷娴忚鍣ㄦ�ц兘绠�鍗曞満鏅垨涓存椂鏂规
鐩戝惉浠ｇ悊/鍙戝竷-璁㈤槄妯″紡鐏垫椿鎵╁睍锛岄�傚悎澶嶆潅椤圭洰闇�瑕佹墜鍔ㄦ嫤鎴� setItem锛岀淮鎶ゆ垚鏈珮闇�瑕佹墜鍔ㄤ簨浠跺彂甯冪殑鍦烘櫙
鑷畾涔� StorageEvent瀹炵幇绠�鍗曪紝鍘熺敓鏀寔 storage 浜嬩欢鐩戝惉闇�瑕佹墜鍔ㄨЕ鍙戜簨浠�/td>鍚岄〉绛句笅 localStorage 鐩戝惉
鑷畾涔変簨浠�/td>鐏垫椿鐨勪簨浠剁鐞嗭紝閫傚悎涓嶅悓鍦烘櫙闇�瑕佹墜鍔ㄨЕ鍙戜簨浠�/td>闇�瑕佽嚜瀹氫箟瑙﹀彂鏉′欢鐨勫満鏅�/td>
MessageChannel閫傚悎缁勪欢閫氫俊鍜屽鏉傚簲鐢ㄥ満鏅�/td>瀹炵幇澶嶆潅锛屼笉閫傚悎绠�鍗曞満鏅�/td>楂樼骇缁勪欢閫氫俊闇�姹�/td>
BroadcastChannel璺ㄩ〉闈㈤�氫俊锛岄�傚悎澶嶆潅閫氫俊闇�姹�/td>浣跨敤鍦烘櫙杈冨叿浣�/td>澶嶆潅鐨勫绐楀彛閫氫俊

濡備綍鍦� React / Vue 浣跨敤

鍦ㄤ富娴佸墠绔鏋讹紙濡� React 鍜� Vue锛変腑锛岀洃鍚� LocalStorage 鍙樺寲骞朵笉鍥伴毦銆傛棤璁烘槸 React 杩樻槸 Vue锛屼綘閮藉彲浠ヤ娇鐢ㄨ嚜瀹氫箟鐨� StorageEvent 鎴栧叾浠栨柟娉曟潵瀹炵幇鐩戝惉銆傚湪姝わ紝鎴戜滑浠�strong>鑷畾涔� StorageEvent 涓轰緥锛屽睍绀哄浣曞湪 React 鍜� Vue 涓疄鐜� LocalStorage 鐨勭洃鍚��/p>

1. 鍦� React 涓娇鐢ㄨ嚜瀹氫箟 StorageEvent

React 鏄竴涓熀浜庣粍浠剁殑妗嗘灦锛屾垜浠彲浠ヤ娇鐢� React 鐨勭敓鍛藉懆鏈熷嚱鏁帮紙濡� useEffect锛夋潵鐩戝惉鍜屽鐞� LocalStorage 鐨勫彉鍖栥��/p> 

import React, { useEffect } from 'react';

const LocalStorageListener = () => {
  useEffect(() => {
    // 瀹氫箟 storage 浜嬩欢鐩戝惉鍣�/span>
    const handleStorageChange = (event) => {
      if (event.key === 'myKey') {
        console.log('Detected localStorage change:', event.newValue);
      }
    };

    // 娣诲姞鐩戝惉鍣�/span>
    window.addEventListener('storage', handleStorageChange);

    // 妯℃嫙瑙﹀彂鑷畾涔夌殑 StorageEvent
    const triggerCustomStorageEvent = () => {
      const storageEvent = new StorageEvent('storage', {
        key: 'myKey',
        newValue: 'newValue',
        url: window.location.href,
      });
      window.dispatchEvent(storageEvent);
    };

    // 缁勪欢鍗歌浇鏃剁Щ闄ょ洃鍚櫒
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []); // 绌轰緷璧栨暟缁勮〃绀鸿 effect 鍙細鍦ㄧ粍浠舵寕杞芥椂杩愯

  return (
    <div>
      <button onClick={() => localStorage.setItem('myKey', 'newValue')}>
        淇敼 localStorage
      </button>
      <button onClick={() => window.dispatchEvent(new StorageEvent('storage', {
        key: 'myKey',
        newValue: localStorage.getItem('myKey'),
        url: window.location.href,
      }))}>
        鎵嬪姩瑙﹀彂 StorageEvent
      </button>
    </div>
  );
};

export default LocalStorageListener;
  • useEffect 鏄� React 鐨勪竴涓� Hook锛岀敤鏉ュ鐞嗗壇浣滅敤锛屽湪杩欓噷鎴戜滑鐢ㄥ畠鏉ユ敞鍐屽拰娓呴櫎浜嬩欢鐩戝惉鍣ㄣ��/li>
  • 鎴戜滑鎵嬪姩瑙﹀彂浜� StorageEvent锛屼互渚垮湪鍚屼竴椤甸潰涓洃鍚� LocalStorage 鐨勫彉鍖栥��/li>

2. 鍦� Vue 涓娇鐢ㄨ嚜瀹氫箟 StorageEvent

鍦� Vue 3 涓紝鎴戜滑鍙互浣跨敤 onMounted 鍜� onUnmounted 杩欎袱涓敓鍛藉懆鏈熼挬瀛愭潵绠＄悊浜嬩欢鐩戝惉鍣ㄣ�傦紙Vue 3 Composition API锛夛細

<template>
  <div>
    <button @click="updateLocalStorage">淇敼 localStorage</button>
    <button @click="triggerCustomStorageEvent">鎵嬪姩瑙﹀彂 StorageEvent</button>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';

const handleStorageChange = (event: StorageEvent) => {
  if (event.key === 'myKey') {
    console.log('Detected localStorage change:', event.newValue);
  }
};

const updateLocalStorage = () => {
  localStorage.setItem('myKey', 'newValue');
};

const triggerCustomStorageEvent = () => {
  const storageEvent = new StorageEvent('storage', {
    key: 'myKey',
    newValue: 'newValue',
    url: window.location.href,
  });
  window.dispatchEvent(storageEvent);
};

onMounted(() => {
  window.addEventListener('storage', handleStorageChange);
});

onUnmounted(() => {
  window.removeEventListener('storage', handleStorageChange);
});
</script>
  • 浣跨敤浜� Vue 鐨� Composition API锛屽叾涓� onMounted 鍜� onUnmounted 绫讳技浜� React 鐨� useEffect锛岀敤浜庡湪缁勪欢鎸傝浇鍜屽嵏杞芥椂绠＄悊鍓綔鐢ㄣ��/li>
  • 鍚屾牱鎵嬪姩瑙﹀彂浜� StorageEvent 鏉ョ洃鍚悓涓�椤甸潰涓殑 LocalStorage 鍙樺寲銆�/li>

鎻愮偧灏佽涓�涓� 馃殌馃殌

鏃犺鏄� React 杩樻槸 Vue锛屽皢鑷畾涔� StorageEvent 瀹炵幇涓轰竴涓粍浠舵垨宸ュ叿鍑芥暟鏄父瑙佺殑鍋氭硶銆備綘鍙互灏嗕笂闈㈢殑閫昏緫鎻愬彇鍒颁竴涓嫭绔嬬殑 hook 鎴栧伐鍏峰嚱鏁颁腑锛屾柟渚垮湪椤圭洰涓娆′娇鐢ㄣ��/p>

鍦� React 涓彁鍙栦负 Hook

import { useEffect } from 'react';

const useLocalStorageListener = (key, callback) => {
  useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.key === key) {
        callback(event.newValue);
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, [key, callback]);
};

export default useLocalStorageListener;

鍦� Vue 涓彁鍙栦负宸ュ叿鍑芥暟

import { onMounted, onUnmounted } from 'vue';

export const useLocalStorageListener = (key: string, callback: (value: string | null) => void) => {
  const handleStorageChange = (event: StorageEvent) => {
    if (event.key === key) {
      callback(event.newValue);
    }
  };

  onMounted(() => {
    window.addEventListener('storage', handleStorageChange);
  });

  onUnmounted(() => {
    window.removeEventListener('storage', handleStorageChange);
  });
};
  • 鍦� React 涓紝鎴戜滑鍒涘缓浜嗕竴涓嚜瀹氫箟 Hook useLocalStorageListener锛岄�氳繃浼犲叆鐩戝惉鐨� key 鍜屽洖璋冨嚱鏁版潵鎹曡幏 LocalStorage 鐨勫彉鍖栥��/li>
  • 鍦� Vue 涓紝鎴戜滑鍒涘缓浜嗕竴涓伐鍏峰嚱鏁� useLocalStorageListener锛屽悓鏍烽�氳繃浼犲叆 key 鍜屽洖璋冨嚱鏁版潵鐩戝惉鍙樺寲銆�/li>

鎬荤粨

鍦ㄥ悓涓�涓祻瑙堝櫒椤电涓洃鍚� localStorage 鐨勫彉鍖栧苟闈為毦浜嬶紝浣嗕笉鍚屽満鏅笅闇�瑕佷笉鍚岀殑鏂规銆備粠绠�鍗曠殑杞鍒伴珮绾х殑 BroadcastChannel锛屾湰鏂囦粙缁嶇殑鍑犵鏂规鍚勬湁浼樼己鐐广�傛牴鎹綘鐨勫疄闄呴渶姹傦紝閫夋嫨鍚堥�傜殑鏂规鍙互甯姪浣犳洿楂樻晥鍦拌В鍐抽棶棰樸��/p>

  • 绠�鍗曢渶姹�/strong>锛氬彲浠ヨ�冭檻浣跨敤鑷畾涔� StorageEvent 鎴� CustomEvent 瀹炵幇鐩戝惉銆�/li>
  • 澶嶆潅闇�姹�/strong>锛氬浜庢洿楂樼骇鐨勫満鏅紝濡傝法椤甸潰閫氫俊锛�code>MessageChannel 鎴� BroadcastChannel 鏄洿濂界殑閫夋嫨銆�/li>

濡傛灉浣犳湁鍏朵粬鐨勪紭鍖栨妧宸ф垨闂锛屾杩庡湪璇勮鍖哄垎浜紝璁╂垜浠竴璧蜂氦娴佹洿澶氱殑瑙ｅ喅鏂规锛�/p>

avatar
鏂囩珷
闃呰
绮変笣