实现在浏览器中对localStorage操作的事件监控

对于localStorage都不陌生了，但是我们平时使用的大部分是一些基础用法，比如localStorage.setItem()、localStorage.getItem()等对于存储内容的操作；那如果我们需要在setItem之后做一些其他的逻辑该怎么办呢？其实也就是我们该如何监听setItem事件呢？

localStorage基础

这里就不再多说了，大家对于localStorage的使用也比较熟悉了：它是浏览器提供的一个本地存储的API，可以以键值对的形式存储数据，存储的数据是字符串形式。传送门
在localStorage中存储一个key为test的值：

localStorage.setItem('test', 'Tom');

根据某一个key获取对应的value值，如下:

let cat = localStorage.getItem('test');

根据某一个key删除对应的value值，如下:

localStorage.removeItem('test');

移除所有的项，如下:

localStorage.clear();

以上是帮大家回忆一下localStorage的基本用法，那接下来就是重点了（敲黑板了）~~~

监听setItem事件

这里会用到javascript中的Event接口，如果对Event的使用不熟悉的可以点击这里 "把大象装进冰箱总共分几步。。。"，呸！有点乱。。。
监听setItem事件总共分几步？三步

第一步：定义一个变量存储原始的setItem方法

const orignalSetItem = localStorage.setItem;

第二步：重写setItem方法

localStorage.setItem = function(key, newValue) {
        let setItemEvent = new Event('setItemEvent');
        setItemEvent.newValue = newValue;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this, arguments);
}

第三步：监听事件

window.addEventListener('setItemEvent', function(e) {
     
});

以上就完成了对setItem的监听，当调用localStorage.setItem的时候就可以做一些其他的操作了，比如调用接口将更新之后的数据存储到服务端。
是不是很简单，2022年除夕前夜，继续愉快的学习！！！