Blazor State: Browser Storage

Browser storage

For transient data that the user is actively creating, a commonly used storage location is the browser’s localStorage and sessionStorage collections:

• localStorage is scoped to the browser’s window. If the user reloads the page or closes and re-opens the browser, the state persists. If the user opens multiple browser tabs, the state is shared across the tabs. Data persists in localStorage until explicitly cleared.
• sessionStorage is scoped to the browser tab. If the user reloads the tab, the state persists. If the user closes the tab or the browser, the state is lost. If the user opens multiple browser tabs, each tab has its own independent version of the data.

 Note

localStorage and sessionStorage can be used in Blazor WebAssembly apps but only by writing custom code or using a third-party package.

Generally, sessionStorage is safer to use. sessionStorage avoids the risk that a user opens multiple tabs and encounters the following:

• Bugs in state storage across tabs.
• Confusing behavior when a tab overwrites the state of other tabs.

localStorage is the better choice if the app must persist state across closing and re-opening the browser.

 Warning

Users may view or tamper with the data stored in localStorage and sessionStorage.

Sources:

https://docs.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-5.0&pivots=webassembly