Override dot notation for localStorage

问题:

I am trying to override the dot notation for access to localStorage. I already managed to override the getItem and setItem methods as described here: Is it possible to override Local Storage and Session Storage separately in HTML5?

Now I tried to create a Proxy to also catch the dot access, but since I seem to be unable to overwrite the localStorage object as tried here

localStorage  = new Proxy(localStorage, {
get: function(target, name) {
    if (!(name in target)) {
        console.log("Getting non-existent property '" + name + "'");
        return undefined;
    }
    return '123';
},
set: function(target, name, value) {
    if (!(name in target)) {
        console.log("Setting non-existent property '" + name + "', initial value: " + value);
    }
    target[name] = value;
}
});

Now when I try it I still get test instead of 123:

localStorage.testKey = "test";
alert(localStorage.testKey)

回答1:

If you define the getter on localStorage it should work:

Object.defineProperty(window, "localStorage", new (function () {
    this.get = function() {
      console.log("I'm getting called");
    }
})());

回答2:

window.localStorage is a read-only property, so you cannot just reassign it like that.

(I recommend turning on strict mode, which would have alerted you to this fact by throwing an exception.)

However, it is configurable. If you delete it from the window object first, your code will work as intended.

var lsProxy = new Proxy(localStorage, {
    /* insert descriptor here */
});

delete window.localStorage;
window.localStorage = lsProxy;

You could also redefine it with Object.defineProperty.

Object.defineProperty(window, "localStorage", {
    value: lsProxy,
    configurable: true,
    enumerable: true,
    writable: false
});