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 localStorage
to 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 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.
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.
Use Object.defineProperty
or Proxy
equivalent 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 writable
attribute, 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.
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.