65.如何监听 LocalStorage 的变化

利用原生api storage事件

同域名下 页面a监听storage事件,当页面b调用时setItem时就会触发这个回调. a:

  <script>
    window.addEventListener('storage', (a) => {
      console.log(a);
    })
  </script>

b:

  <script>
    localStorage.setItem('set', 123)
    setTimeout(() => {
      localStorage.setItem('set', 1000)
      localStorage.setItem('set', 1000)
    }, 1000)
  </script>

回调会得到 key,oldValue,newValue等关键信息, 当我们setItem相同值时不会调用该回调

重新封装localStroage

下面只是一个简单的封装,项目中可以使用发布订阅的模式去使用

    function set (key, value) {
    oldValue = localStorage.getItem(key)
    localStorage.setItem(key, value)
    console.log({
      key,
      oldValue,
      newValue: value
    });
  }

  set('test', 123)
  set('test', 333)