Use localStorage with JavaScript.
I often want to rewrite localStorage to implement a certain function. What are the methods to rewrite the methods in localStorage? There are many developers who want to rewrite the methods in localStorageto realize the expiration time of the key, or to monitor the read and write of the key. So what are the methods to override the methods in localStorage. This is my 43rd Medium article.
1. Rewrite directly on localStorage
Many developers like the idea of rewriting, first keeping the original method and then rewriting the method directly on localStorage like below.
However, this way of writing is not overriding the method setItem(), but to add a setItem attribute to localStorage. When the value attribute of the method is declared, the native setItem() method is overwritten.
I haven’t tested it too much, but in some browsers, this attribute will be ignored and causing our rewriting to fail.
2. Override the method on localStorage.__proto__
If we look closely, setItem and getItem are inherited from Storage __proto__ pseudo property.
Then we directly override the above localStorage.__proto__ method.
This implements the real override of the setItem() method.
But there is still a problem here. Both localStorage and sessionStorage inherit from Storage. After rewriting the properties or methods on localStorage.__proto__, the methods in sessionStorage are also rewritten.
3. External packaging layer
We do not directly modify the method of localStorage itself, but wrap a layer on the outside, and then use localStorage to realize the storage function at the bottom layer.
In this way, the degree of freedom is relatively higher, and there is no compatibility problem in Section 1. Only the name used has changed and the properties and methods in localStorage are completely blocked.
If you want to use a custom object without the pack then you need to implement all the properties and methods. It is not possible to mock a method alone like the above.
4. Override localStorage
Use Object.definePropertyor Proxyequivalent to completely overriding the localStorage variable. Better than Section 3 in that the name has not changed.
4.1 Direct coverage, no effect
If you use the following method to cover directly, it will have no effect.
window.localStorage = Object.create(null); console.log(window.localStorage); //still native
We get the property descriptor of localStorage through Object.getOwnPropertyDescriptor. It can be found that there is no writable: true attribute, which means that localStorage is not directly writable.
4.2 Overriding with Object.defineProperty
Since there is no writableattribute, we will add one to it. We can override localStorage with Object.defineProperty.
But you can’t use the above writing method with one layer outside. If you directly give the above myLocalStorage to localStorage then it will generate infinite recursion (to avoid misleading, the wrong writing method will not be written here).
I have made a backup of localStorage here. If you need a native method then you can also operate it.
5. Summary
In this article, we do not specifically implement a function such as setting the expiration time. But talk about how to rewrite localStorage or the methods in it from another perspective.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.