Being a front-end developer one of the common things that we wanted is to store and share data in the client browser, And most of us really rely on local storage. So what is localStorage..?
according to MDN:
localStorageprovides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. data stored in
localStoragehas no expiration time. Data in a
localStorageobject created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.
So the data stored in
localStorage is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different
localStorage object from the same site accessed with HTTPS (e.g., https://example.com).
The keys and the values are always in the UTF-16
DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
- data stored in
localStoragehas no expiration time
localStoragewill be available for any tab or window in the browser,
- Have to constantly keep back up of data to prevent loss
- The user is completely responsible for the safety of the data
- Takes up more storage space if you store locally
Window.sessionStorage is a better alternative option for
A page session lasts only as long as the browser tab is open, and it will survive over page reloads and restores. But opening a page in a new tab or window will create a new session. And we have a storage limit is larger than a cookie (at most 5MB)
We can store data using
so the session storage now has data with key
We can get data using the
We can remove data using
removeItem will remove a specific key from session storage, whereas the
clear method will clean up the entire session storage