所以,你是知道怎么监听LocalStorage的变化的?

开发 前端
很多比较出名的项目中,大家可以去看那些开源的项目中,基本很少直接使用localStorage,而是都是会封装一层的。

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心

背景

前几天有位兄弟问我,如何去监听localStorage的变化呢??我确实是没遇到过这种场景,但是我仔细想想,似乎想要达到这样的效果,其实也不难。

解题思路

第一种:storageEvent

其实JavaScript原生就有一个监听localStorage变化的事件——storage,使用方法如下

window.addEventListener('storage', () => {
  // callback
})

我们来看看MDN上是怎么描述这个事件的:

图片

也就是说,同域下的不同页面A、B,只有本页面修改了localStorage才会触发对方的storage事件

但是显然这种方案很不适用在现在的大部分项目中,毕竟这种方案太局限了,不能应用在本页面监听的场景

第二种:封装localStroage

其实就是代理一下对localStorage进行多一层的封装,使得我们每次在操作localStorage的时候,都会多走一层函数,而我们就可以在这一层中去执行监听的事件了,下面是简单的代码例子:

class CommonLocalStorage {
  private storage: Storage;
  constructor() {
    this.storage = window.localStorage;
  }
  set(key: string, value: any) {
    // 执行监听的操作
    return this.storage.setItem(`${prefix}${key}`, value);
  }
  get(key: string) {
    // 执行监听的操作
    return this.storage.getItem(`${prefix}${key}`);
  }
  del(key: string) {
    // 执行监听的操作
    return this.storage.removeItem(`${prefix}${key}`);
  }
  clear() {
    // 执行监听的操作
    this.storage.clear();
  }
}

const commonStorage = 
new CommonLocalStorage();

export default commonStorage

这种方式也被应用于很多比较出名的项目中,大家可以去看那些开源的项目中,基本很少直接使用localStorage,而是都是会封装一层的

责任编辑:武晓燕 来源: 前端之神
相关推荐

2023-06-02 07:32:34

localStorage​监听

2013-02-27 10:27:44

GitHub

2024-02-19 00:00:00

Docker轻量级容器

2024-03-26 10:17:49

开发缓存key

2023-04-28 07:44:44

MyBatis查询SQL

2020-06-29 18:54:39

大数据新发地疫情

2021-01-21 09:09:18

时区转换程序

2020-12-08 09:25:41

死锁MySQL数据库

2018-09-05 08:59:51

服务器DNS网络

2022-11-16 08:43:30

Node.js模块

2014-08-22 10:14:27

2021-07-19 16:11:22

智能手机科技兴趣

2022-05-11 09:09:42

用户客户

2021-01-29 13:22:58

Swagger版本OpenAPI

2021-04-26 07:53:06

DOM前端框架

2022-08-25 09:08:40

微服务架构

2012-12-21 16:57:37

手机安全个人信息泄漏个人信息安全

2024-02-19 08:07:31

Go版本语言

2021-09-03 08:23:21

Vue 插槽子组件

2024-02-22 09:21:09

.NETActionOptions
点赞
收藏

51CTO技术栈公众号