如何打破 localStorage 的变化

Question

我正在寻找一种方法来中断任何 localStorage 更改。我发现有一些我不知道从哪里来的神秘条目，我希望调试器中断任何更改，以便我可以检查代码。这包括：

localStorage.someKey = someValue;
localStorage["someKey"] = someValue;
localStorage.setItem("someKey", someValue);

由于在 localStorage 中有很多方法可以更改/创建条目，因此简单地覆盖 .setItem 并执行 debugger; 将不起作用。任何想法都值得赞赏。

Answer 1

不在本机 localStorage 对象上，而是在代理版本上：

Object.defineProperty(window, 'localStorage', {
  configurable: true,
  enumerable: true,
  value: new Proxy(localStorage, {
    set: function (ls, prop, value) {
      console.log(`direct assignment: ${prop} = ${value}`);
      debugger;
      ls[prop] = value;
      return true;
    },
    get: function(ls, prop) {
      // The only property access we care about is setItem. We pass
      // anything else back without complaint. But using the proxy
      // fouls 'this', setting it to this {set: fn(), get: fn()}
      // object.
      if (prop !== 'setItem') {
        if (typeof ls[prop] === 'function') {
          return ls[prop].bind(ls);
        } else {
          return ls[prop];
        }
      }
      // If you don't care about the key and value set, you can
      // drop a debugger statement here and just
      // "return ls[prop].bind(ls);"
      // Otherwise, return a custom function that does the logging
      // before calling setItem:
      return (...args) => {
        console.log(`setItem(${args.join()}) called`);
        debugger;
        ls.setItem.apply(ls, args);
      };
    }
  })
});

我们为window.localStorage 创建一个Proxy，它将拦截property assignment（处理localStorage.someKey = someValue 和localStorage["someKey"] = someValue 情况）和property access（处理localStorage.setItem("someKey", someValue) 情况）。

现在我们需要将window.localStorage 指向我们的代理，但它是只读的。但是，它仍然是可配置的！我们可以用Object.defineProperty重新定义它的价值。