检测localStorage的任何变化？

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

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