监听localStorage变化

Nordon
17,324 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

localStorage在开发过程中使用的非常广泛，其不仅可以代替Cookie在浏览器帮助我们存储数据、信息等，存储的数据将保存在浏览器会话中，存储在 localStorage 的数据可以长期保留。还可以针对本地存储的数据进行监听（浏览器不同tab页的监听），可以在数据变动的时候及时做出相应的动作

基础使用

针对localStorage的常规API使用非常简单，就是几个常用的API：

localStorage.setItem(key, value); // 增 
localStorage.getItem(key); // 查
localStorage.removeItem(key); // 删
localStorage.clear(); // 移除所有

在使用的过程中，需要注意localStorage中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)

比如当需要将一个对象存储在localStorage中

const obj = {name: 'Nordon'}
localStorage.setItem('myObj', obj); // 存储数据

此时存储的数据并不是我们所期望的obj的数据，存储的内容是**[object Object]，因为在setItem**时会进行类型转换，村粗的是调用obj.toString()之后的数据

因此在存储引用类型数据时需要JSON.stringify之后存储，与此相应的是获取数据时需要进行JSON.parse操作

const obj = {name: 'Nordon'}
localStorage.setItem('myObj', JSON.stringify(obj)); // 存储数据 

let getObj = localStorage.getItem('myObj'); // 获取数据
// 此时获取的数据是一个字符串，需要将其JSON.parse之后使用
getObj = JSON.parse(getObj)

监听localStorage

背景：站点的顶部有一个公共通用的导航栏，其中有一块内容是展示用户头像

image-20210924171206500.png

需求：在浏览器打开多个tab，当用户在其中一个浏览器tab编辑个人资料将头像修改了，需要将所有tab的头像都展示为最新的头像(自动忽视审核过程🐶，因为此需求纯属虚构，若有雷同，那就是真的😂😂😂)

方案：将个人信息存储在localStorage中，并且对localStorage进行监听，当用户修改个人头像时触发监听，将头像进行替换为最新的图片

接下来看一下如何监听localStorage

window.onload = () => {
  // 设置
  window.localStorage.setItem("watchName", 1);
  
  setTimeout(() => {
    // 修改
    window.localStorage.setItem("watchName", 2);
  }, 2000);
  
  // 监听变化
  window.addEventListener("storage", (e) => {
		// todo ...
  });
};

当localStorage变化时就会触发storage的监听，然后进行对应的业务逻辑处理，具体的逻辑便不再赘述，小伙伴可自行实现

注意：若是只打开一个tab，那么监听storage是不起效果的，需要在多个tab中方可以看到效果

avatar
文章
阅读
粉丝