Full-Stack base note

• LocalStorage (長期記憶)：資料會永久儲存在使用者的瀏覽器中，即使關閉瀏覽器也不會消失。適合儲存使用者偏好設定（如主題）。

• SessionStorage (短期記憶)：資料只在當前的瀏覽器分頁會話中有效，一旦分頁或瀏覽器關閉，資料就會被清除。適合儲存臨時資料（如購物車）。

實作範例
安裝：dotnet add package Blazored.LocalStorage
安裝：dotnet add package Blazored.SessionStorage

註冊服務 (在 Program.cs 中)：builder.Services.AddBlazoredLocalStorage();
builder.Services.AddBlazoredSessionStorage();

在 C# 元件中使用 (StorageDemo.razor)：
@page “/storage-demo”
@inject ILocalStorageService LocalStorage  // 長期記憶
@inject ISessionStorageService SessionStorage // 短期記憶 

<h3>本機儲存與會話儲存示範</h3>
<h4>長期記憶 (主題偏好)</h4>
<p>主題偏好: <strong>@themePreference</strong></p>
<button @onclick=”SetTheme”>切換主題到 ‘Dark'</button>

<hr>
<h4>短期記憶 (購物車數量)</h4>
<p>當前購物車商品數: <strong>@cartCount</strong></p>
<button @onclick=”AddItem”>增加商品 (+1)</button>
<button @onclick=”ClearCart”>清空購物車 (短期記憶)</button>

@code {
   private string themePreference = “Loading…”;
    private int cartCount = 0;

   // 定義儲存的鍵名
   private const string ThemeKey = “userTheme”;
    private const string CartKey = “tempCartCount”;

    // 1. 元件初始化時，讀取兩種記憶
   protected override async Task OnInitializedAsync()
   {
    // 讀取長期記憶：從 LocalStorage 讀取主題偏好 (string)
    // 如果找不到，使用預設值 “Light”
        themePreference = await LocalStorage.GetItemAsStringAsync(ThemeKey) ?? “Light”;

    // 讀取短期記憶：從 SessionStorage 讀取購物車數量 (int)
    // GetItemAsync<T> 會自動處理反序列化 (JSON -> C#)
        cartCount = await SessionStorage.GetItemAsync<int?>(CartKey) ?? 0;
   }

 // 2. 寫入長期記憶 (主題偏好)
   private async Task SetTheme()
   {
       themePreference = “Dark”;
    // 程式碼功能：將 ‘Dark’ 這個值永久儲存到用戶的瀏覽器中。
    // (即使關閉並重開瀏覽器，資料依然存在)
        await LocalStorage.SetItemAsStringAsync(ThemeKey, themePreference);
    }

   // 3. 寫入與更新短期記憶 (購物車)
   private async Task AddItem()
   {
       cartCount++;
    // 程式碼功能：將新的購物車數量儲存到 SessionStorage 中。
    // (一旦用戶關閉瀏覽器視窗或分頁，資料就會被自動清除)
        await SessionStorage.SetItemAsync(CartKey, cartCount);
    }

   private async Task ClearCart()
   {
       cartCount = 0;
       // 程式碼功能：移除購物車的短期記憶。
        await SessionStorage.RemoveItemAsync(CartKey);
   }
}
dotnet watch 來預覽