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.
- Common mistake.
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 |
Common mistake
Here are some common mistakes that we have collected from the Blazor School Discord Community.
Access the browser storage without try catch
Blazor Server will render a web page 2 times, first in server and the second time is in browser. Because the browser storage is not available in the server so when Blazor trying to render the page first time, you will need to wrap the browser storage access code in a try catch. If you don't, you will get an error.
