如何监听storage仓库变化(只限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及一些其他属性
    });