Browser storage
Modern browsers offer different options for storing website data, allowing this data to be retrieved when needed. In this tutorial, you will discover:
- Why do you need to use the browser storage?
- Types of browser storage.
- Compare between browser storage types.
You can download the example code used in this topic on GitHub.
Why do you need to use the browser storage?
The browser storage will help you to have some useful functionalities or act as a cache to reduce the load to the server. Some uses cases for the browser storage:
- Load the previous selected theme.
- Persisting typing data.
- Storing the login state.
- Filter data at the frontend.
- Improving website performance.
- Reducing requests to back-end server.
Types of browser storage
There are 6 types of browser storage:
- Cache.
- Cookie.
- IndexedDB.
- Local storage.
- Memory.
- Session storage.
Compare between browser storage types
| Cache | Cookie | IndexedDB | Local Storage | Memory | Session Storage | |
| Lifetime | Until deleted | Expired time/Until deleted | Until deleted | Until deleted | When the user exits the tab | When the user exits the tab |
| Allowed Data Type | Request, Response |
Key value | Various types | Key value | Various types | Key value |
| Shared between tabs | Yes | Yes | Yes | Yes | No | No |
