Blazor笔记-Browser storage

更新记录

完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html

2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

Types of browser storage

Cache: This type of storage is used to store temporary data, such as images or scripts, that are frequently accessed by your application. The cache helps to improve performance by allowing your application to load data quickly without needing to make a server request each time.

Cookies: Cookies are small pieces of data that are stored on the user's device by the browser. They are often used to store user preferences, session data, or login credentials. Cookies are sent to the server with each request, enabling your application to remember user settings or keep users logged in.

IndexedDB: IndexedDB is a client-side database that enables you to store large amounts of structured data on the user's device. This type of storage is useful when working with offline web applications or when you need to store large amounts of data that would be slow to retrieve from the server.

Memory: can be useful for storing data that needs to be quickly accessed and updated by the application, such as in-memory caches or variables used for calculations. However, it's important to note that data stored in memory is volatile, meaning it will be lost when the page is refreshed or closed.
Local storage: Local storage is similar to cookies but can store larger amounts of data. This type of storage is often used to store user settings, application state, or data that needs to persist between sessions.

Session storage: Session storage is similar to local storage, but the data is cleared when the user closes the browser window. This type of storage is useful when working with temporary data or when you don't want to persist data between sessions.

A comparison of different browser storage types

Local/Session storage

@using Microsoft.AspNetCore.Components.Server.
ProtectedBrowserStorage
//Local Storage
@inject ProtectedLocalStorage storage
//Session Storage
@inject ProtectedSessionStorage storage

await storage.GetAsync<string>("ExampleValue").Value;
await storage.SetAsync("ExampleValue",examplevalue);

或者直接调用js

@inject IJSRuntime js
await js.InvokeVoidAsync("localStorage.setItem","ExampleValue",examplevalue);
await js.InvokeAsync<string>("localStorage.getItem","ExampleValue");

或者自己封装一个

public class LocalStorageAccessor : IAsyncDisposable
{
    private Lazy<IJSObjectReference> _accessorJsRef = new();
    private readonly IJSRuntime _jsRuntime;

    public LocalStorageAccessor(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task<T> GetValueAsync<T>(string key)
    {
        await WaitForReference();
        var result = await _accessorJsRef.Value.InvokeAsync<T>("get", key);

        return result;
    }

    public async Task SetValueAsync<T>(string key, T value)
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeVoidAsync("set", key, value);
    }

    public async Task Clear()
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeVoidAsync("clear");
    }

    public async Task RemoveAsync(string key)
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeVoidAsync("remove", key);
    }

    private async Task WaitForReference()
    {
        if (_accessorJsRef.IsValueCreated is false)
        {
            _accessorJsRef = new(await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/LocalStorageAccessor.js"));
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_accessorJsRef.IsValueCreated)
        {
            await _accessorJsRef.Value.DisposeAsync();
        }
    }
}

对应的JS

export function get(key)
{
    return window.localStorage.getItem(key);
}

export function set(key, value)
{
    window.localStorage.setItem(key, value);
}

export function clear()
{
    window.localStorage.clear();
}

export function remove(key)
{
    window.localStorage.removeItem(key);
}

Cache storage

What is Cache storage?

Cache storage is an excellent option for caching URL-addressable resources. It is particularly useful when dealing with large amounts of data or when users need to access the website without an internet connection. However, it's worth noting that Cache storage is a relatively new technology, so it's important to check whether the browser supports it before implementation. The Cache storage only accepts Request and Response as key and value, respectively.

What is Request and Response?

Request and Response are two JavaScript classes used to handle API requests and responses. As the name implies, Request represents a request to an API, while Response represents a response from the API. These classes are used to construct and parse requests and responses, and to interact with the data that is returned from the API.

How to access the Cache storage in the browser?

In WebBrowser, you can find the Cache storage under the Storage tab, as shown in the image below:

Cookie storage

Memory storage

得自己封装，本质就是一个集合

//定义类
public class MemoryStorageUtility
{
    public Dictionary<string, object> Storage { get; set; } = new();
}

//注册服务
builder.Services.AddScoped<MemoryStorageUtility>();


//注入使用
@inject MemoryStorageUtility MemoryStorageUtility

<h3>BrowserStorageDemonstrate</h3>
<form>
    <label>
        Key
        <input type="text" @bind-value="Key" />
    </label>
    <label>
        Value
        <input type="text" @bind-value="Value" />
    </label>
    <button type="button" @onclick="SetValue">Set Value</button>
</form>
<div>Stored Value: @StoredValue</div>
<button type="button" @onclick="GetValue">Get Value</button>
<button type="button" @onclick="Remove">Remove Value</button>
<button type="button" @onclick="ClearAll">Clear All</button>

@code {
    public string Key { get; set; } = "";
    public string Value { get; set; } = "";
    public string StoredValue { get; set; } = "";

    public void SetValue()
    {
        MemoryStorageUtility.Storage[Key] = Value;
    }

    public void GetValue()
    {
        if (MemoryStorageUtility.Storage.TryGetValue(Key, out var value))
        {
            StoredValue = value.ToString()!;
        }
        else
        {
            StoredValue = "";
        }
    }

    public void Remove()
    {
        MemoryStorageUtility.Storage.Remove(Key);
    }

    public void ClearAll()
    {
        MemoryStorageUtility.Storage.Clear();
    }
}