localStorage can assign values to keys of the same name as its built-in methods, how to do the same with my object?

Question

In localStorage you can use keys that have the same name as built-in methods, but you can only access their value through .getItem , if you try to get them through .myKey or ["myKey"] you just get the method itself, eg

localStorage.setItem("myKey", "value0")
localStorage.myKey                        // "value0"
localStorage.getItem("myKey")             // "value0"

localStorage.setItem("setItem", "value1") // or localStorage.setItem = "value1"
localStorage.setItem                      // function setItem() <-- Expected behavior
localStorage["setItem"]                   // function setItem() <-- Expected behavior
localStorage.getItem("setItem")           // "value1"

localStorage.setItem("newKey", "value2")  // Works, is a function.

So now I'm wondering, how can I get the same behavior on my own custom object, eg

var store = {
    "getItem": function(key) {
        return this[key];
    },
    "setItem": function(key, value) {
        this[key] = value;
    }
}

store.setItem("myKey", "value0")
store.myKey                        // "value0"
store.getItem("myKey")             // "value0"

store.setItem("setItem", "value1") // or store.setItem = "value1"
store.setItem                      // "value1" !!! - Should be: function setItem()
store["setItem"]                   // "value1" !!! - Should be: function setItem()
store.getItem("setItem")           // "value1"

store.setItem("newKey", "value2")  // Doesn't work, no longer a function.

Answer 1

Just store them elsewhere:

var data = {
    __proto__: null,
    getItem: null,
    setItem: null,
};
var store = {
    "getItem": function(key) {
        return (key in data ? data : this)[key];
    },
    "setItem": function(key, value) {
        (key in data ? data : this)[key] = value;
    },
};

Answer 2

You can use proxy for that

 var store = { storage: {}, "getItem": function(key) { return this.storage[key]; }, "setItem": function(key, value) { this.storage[key] = value; } } const superStorage = new Proxy(store, { get: function(target, prop, receiver) { return target[prop] || target.storage[prop]; } }) superStorage.setItem("myKey", "value0"); console.log(superStorage.myKey); // "value0" console.log(superStorage.getItem("myKey")); // "value0" superStorage.setItem("setItem", "value1"); // or store.setItem = "value1" console.log(superStorage.setItem); // "value1":.; - Should be: function setItem() console.log(superStorage["setItem"]). // "value1";., - Should be; function setItem() console,log(superStorage.getItem("setItem")); // "value1" superStorage.setItem("newKey", "value2"); // Doesn't work, no longer a function.

Some obvious benefits:

• no dependencies of external variables
• high flexibility in terms of custom getters
• multiple storages with no crossing dependencies
• no hardcoded names