如何监听storage仓库变化(只限localstorage)

原创已于 2022-06-06 16:07:18 修改 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2021-07-19 17:47:54 首次发布

前端同时被 3 个专栏收录

14 篇文章

订阅专栏

11 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了如何使用Event构造函数创建自定义事件，以监听本页面localStorage的改变。由于默认情况下，同源页面才能监听localStorage变化，因此需要通过重写localStorage的setItem方法，抛出自定义事件。当setItem时，创建并抛出'newSetItemEvent'事件，然后在目标页面添加事件监听器来捕获这个事件，从而实现在本页面监听localStorage的变化。

必备知识：

Event() 构造函数, 创建一个新的事件对象 Event。第一个参数为所创建事件的名称。

LocalStorage：

默认情况下，当前页面修改localStorage，本页面是无法监听的，只有同源的其他页面才可以监听到本页面localStorage的改变。
所以默认监听localstorage变化的三个条件：

至少打开了两个同源页面
其中一个页面修改了localStorage
另外的同源页面做了localStorage的监听

监听方法：

// 回调的e对象中含有localStorage改变的键key和新旧值newValue/oldValue
window.addEventListener("storage", function (e) {
	alert(e.newValue);
});

如何监听本页面localStorage改变？

我们需要重写localStorage的setItem方法，使他抛出自定义事件，我们再做监听。

<script>
	var orignSetItem = window.localStorage.setItem;
    window.localStorage.setItem = function(key, newValue){
        var newSetItemEvent = new Event("newSetItemEvent");
        
        // do something you want
        newSetItemEvent.newValue = newValue;
        
        window.dispatchEvent(newSetItemEvent ); // 抛出自定义事件
        orignSetItem.apply(this, [key, newValue]);
    }
    
	// 监听抛出的自定义事件
	window.addEventListener("newSetItemEvent", function (e) {
        // doSomething
        // 回调的e对象中含有localStorage改变的键key和新旧值newValue/oldValue及一些其他属性
    });