普通 MVC 网页应用本地存储会往往采用 cookie, 而 Blazor wasm 应用和其他 SPA 框架类似, 基本不使用 cookie, 通常使用的是 Local storage 或 session storage.
Local storage 和 session storage的持久化能力不同, session storage 在浏览器的 tab 页关闭后, 将会自动失效, 而 Local storage 即使是重启浏览器进程后也会继续有效, 直到用户清除本地缓存.
对于Blazor wasm 应用需要本地存储的往往是 jwt 或 userId, 所以Local storage 更合适一些. session storage 相对鸡肋一些, 完全可以使用 app state container 全局类代替, 所以不是本文关注的重点.
Blazor wasm 使用Local storage的方法有:
通过JS互操作方式调用java script API完成,
使用 blazor 现成组件, 最流行的组件是 blazored 的 LocalStorage, 主页 https://github.com/blazored/LocalStorage
=====================================
使用 blazored 的 LocalStorage
1. 安装组件, 命令: dotnet add package Blazored.LocalStorage
2. Program.cs 中注册 LocalStorage 服务
3. _Imports.razor 文件中引用一下, 以方便页面使用 @using Blazored.LocalStorage
4. 需要存储或读取local storage的文件, 使用依赖注入的方式, 注入 ILocalStorageService 或 ISyncLocalStorageService 服务, 前者是异步版, 后者是同步版, 推荐使用异步版.
The APIs available are:
asynchronous via <code>ILocalStorageService</code>:
SetItemAsync()
SetItemAsStringAsync()
GetItemAsync()
GetItemAsStringAsync()
RemoveItemAsync()
ClearAsync()
LengthAsync()
KeyAsync()
ContainKeyAsync()
synchronous via <code>ISyncLocalStorageService</code> (Synchronous methods are only available in Blazor WebAssembly):
SetItem()
SetItemAsString()
GetItem()
GetItemAsString()
RemoveItem()
Clear()
Length()
Key()
ContainKey()
Note: Blazored.LocalStorage methods will handle the serialisation and de-serialisation of the data for you, the exceptions are the <code>SetItemAsString[Async]</code> and <code>GetItemAsString[Async]</code> methods which will save and return raw string values from local storage.
示例代码: