Question

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

.setItem

由于在localStorage中有很多方法可以更改/创建条目，因此简单地覆盖debugger;和change()将无法正常工作。任何想法都表示赞赏。

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重新定义其价值。

如何打破localStorage的变化

1 个答案: