拦截 localStorage.getItem()

Question

有没有办法拦截对 localStorage 的调用？或者可能存在一些处理程序？

如果我在类似 localStorage.getItem() 之类的代码脚本中有某处，我需要知道存储将获取一些项目，并且我想防止这种情况，并做一些我需要的事情。

我想为移动 Web 开发人员编写一个框架。我希望他们以通常的方式使用本地存储调用。我的框架将拦截这些调用，并将数据不放到 W3C 存储中，而是放到本机设备存储中。那可能吗？谢谢。

Answer 1

您可以使用原型。试试这样的：

 Storage.prototype._setItem = Storage.prototype.setItem;
        Storage.prototype.setItem = function (key, value)
        {
            alert("works");
        }

    localStorage.setItem("A", "A");

如果您需要进一步说明，请随时提出。

Answer 2

您可以使用在 window 上触发的 storage 事件跟踪 localStorage 和 sessionStorage 的更改-

在所有打开的选项卡或来自同一来源的页面上触发该事件。

function storageHandler(e){
    var info={
        key:e.key, oldV:e.oldValue, newV:e.newValue, url:e.url || e.uri
    };
    //do something with info
}
window.addEventListener('storage', storageHandler, false);

特殊存储事件属性：

key- the named key that was added, removed, or modified
oldValue- the previous value(now overwritten), or null if a new item was added
newValue-the new value, or null if an item was removed
url or uri-     the page which called a method that triggered this change

您可能需要测试以下 IE #9（attachEvent 和全局事件处理）和 localStorage 支持。

Answer 3

您可以用自己的变量替换整个 localStorage 变量，尽管您可能无法复制 API 的每个部分...

var localStorage = (function () {
    return {
        setItem: function (key, value) {
            alert(key);
        }
    };
}());

localStorage.setItem('a', 'b');

您将需要实现相同的接口，以便您的代码不可见地插入，但这个带有setItem 的示例向您展示了如何做到这一切。

如果您将旧的 localStorage 弹出到变量中以保留它，您仍然可以调用它。

我还没有实现你要测试的任何条件来决定是否将它存储在其他地方。

当然，你可以稍微改变它，让它成为一个库而不是一个拦截器，给它一个不同的名字......这允许你实现一个固定的 API 供人们遵循。

var storageLibrary = (function () {
    return {
        setItem: function (key, value) {
            alert(key);
            if (true) {
                localStorage.setItem(key, value);
            } else {
                // Save it somewhere else   
            }
        }
    };
}());

storageLibrary.setItem('a', 'b');