Question

有没有办法检测HTML5 localStorage中的任何更改，然后如果确实有任何更改，则调用某些函数？我将某些密钥存储为名称为“e1”，“e2”，“e3”等等......

我想检测是否删除或添加了任何键，然后在有任何更改时触发某些功能......

Answer 1

根据规范Storage接口在它影响的全局对象上发出storage event。

因此，在您的情况下，您可以只添加处理程序

window.addEventListener("storage", function () {
    // do your checks to detect
    // changes in "e1", "e2" & "e3" here
}, false);

不需要jQuery偶数。

Answer 2

localDataStorage 界面（HTML5 localStorage API的便捷包装器）方便地在存储所在的同一页面/标签/窗口中触发更改事件事件发生了。免责声明：我是该界面的作者。

一旦安装了 localDataStorage ，此示例代码将使您看到那些更改事件：

function nowICanSeeLocalStorageChangeEvents( e ) { console.log( "subscriber: " + e.currentTarget.nodeName + "\n" + "timestamp: " + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" + "prefix: " + e.detail.prefix + "\n" + "message: " + e.detail.message + "\n" + "method: " + e.detail.method + "\n" + "key: " + e.detail.key + "\n" + "old value: " + e.detail.oldval + "\n" + "new value: " + e.detail.newval + "\n" + "old data type: " + e.detail.oldtype + "\n" + "new data type: " + e.detail.newtype ); }; document.addEventListener( "localDataStorage" , nowICanSeeLocalStorageChangeEvents , false );

示例 nowICanSeeLocalStorageChangeEvents（）函数只是显示关键细节，但是您可以轻松地使用它来执行您提到的特定操作。

例如，如果您添加新密钥

lds.set( 'e2', 101 );

那么你会得到类似的东西

message: create new key method: set key: e2 old value: undefined new value: 101 old data type: undefined new data type: integer

删除键时

lds.remove( 'e2' );

然后您会看到类似的东西

message: remove key method: remove key: e2 old value: 101 new value: undefined old data type: integer new data type: undefined

因此您可以轻松响应本地存储键事件。

检测localStorage的任何变化？

2 个答案: