Override dot notation for localStorage

Question

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)

Answer 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");
    }
})());