Blazor WebAssembly Microsoft.JSInterop.JSException Error: The value 'sessionStorage.length' is not a function

Question

从基本的角度来看，我正在尝试做的是从会话存储中获取密钥列表（密钥名称）。

我尝试这样做的方法是调用 JsRuntime.InvokeAsync 方法来：

获取session存储中key的个数，

循环计算会话存储中的项目数并获取键名。

 public async Task<List<string>> GetKeysAsync()
 {
     var dataToReturn = new List<string>();


     var storageLength = await JsRuntime.InvokeAsync<string>("sessionStorage.length");

     if (int.TryParse(storageLength, out var slength))
     {

         for (var i = 1; i <= slength; i++)
         {
             dataToReturn.Add(await JsRuntime.InvokeAsync<string>($"sessionStorage.key({i})"));
         }
     }

     return dataToReturn;
 }

调用 JsRuntime.InvokeAsync($"sessionStorage.length")) 或 JsRuntime.InvokeAsync($"sessionStorage.key(0)")) 时出现错误“值 'sessionStorage.length' 不是函数。”或值 'sessionStorage.key(0)' 不是函数。

我可以使用会话存储中的密钥名称获取单个项目，而不会出现以下示例中的问题。

    public async Task<string> GetStringAsync(string key)
    {
        return await JsRuntime.InvokeAsync<string>("sessionStorage.getItem", key);
    }

当我在 Chrome 控制台中使用 .length 或 .key(0) 时，它们按预期工作，但在使用 JsRuntime 时却没有。

Answer 1

我能够在不使用 sessionStorage.length 属性的情况下使它工作。我对解决方案不是 100% 满意，但它确实可以按需工作。

请看下面的代码。 .key 的主要内容是在 InvokeAsync 方法中将计数用作单独的变量。

我认为这是因为 JsRuntime.InvokeAsync 方法自动将 () 添加到请求的末尾，所以 sessionStorage.length 变成了 sessionStorage.length() 因此将不起作用. sessionStorage.key(0) 变成了 sessionStorage.key(0)()。等等。这只是一个猜测。

    public async Task<List<string>> GetKeysAsync()
    {
        var dataToReturn = new List<string>();

        var dataPoint = "1";

        while (!string.IsNullOrEmpty(dataPoint) )
        {
            dataPoint = await JsRuntime.InvokeAsync<string>($"sessionStorage.key", $"{dataToReturn.Count}");

            if (!string.IsNullOrEmpty(dataPoint))
                dataToReturn.Add(dataPoint);
        }

        return dataToReturn;
    }

Blazor WebAssembly Microsoft.JSInterop.JSException Error: The value 'sessionStorage.length' is not a function