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.
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.
If we look closely, setItem and getItem are inherited from Storage
__proto__ pseudo property.
Then we directly override the above
This implements the real override of the
But there is still a problem here. Both
sessionStorage inherit from Storage. After rewriting the properties or methods on
localStorage.__proto__, the methods in
sessionStorage are also rewritten.
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.
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
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
But you can’t use the above writing method with one layer outside. If you directly give the above
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.
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.