[Bug] Changed event doesn't fire across tabs about localstorage

[chrissainty]

Hi @Eonasdan, this isn’t a bug the event isn’t designed to fire across tabs. The Changing event is a C# event, when you open a different tab you’re running another instance of the app. There is no way for it to know about an event in the other instance.

[Eonasdan]

hmm I thought it was supposed to be something like window.addEventListener('storage', () => { ?

[chrissainty]

There is a JavaScript event, I assume you’re thinking of this one. This is fired automatically by the browser but we don’t hook into it in any way. As I said, all our events are in C#.

If this is what you’re trying to hook onto then you would need to do this via JavaScript interop.

[pekspro]

Here is an example how to set this up. Note that the event will be triggered in other tabs, not the tab were the storage has been changed.

In JavaScript:

window.addEventListener('storage', function (e) {
    if (e.storageArea === localStorage) {
        if (e.key !== 'i18next.translate.boo') {
            DotNet.invokeMethodAsync('MyAssembly', 'LocalStorageChanged', e.key, e.key, e.oldValue, e.newValue);
        }
    }
});

i18next.translate.boo has something to do with translations and is used by Blazor. MyAssembly should be the name of the assembly.

In C#:

using Microsoft.JSInterop;

public static class JavaScriptCallbacks
{
    [JSInvokable]
    public static Task LocalStorageChanged(string? key, string? oldValue, string? newValue)
    {
        Console.WriteLine($"Method MyMethod has been invoked with key: {key}");
        return Task.CompletedTask;
    }
}

However, this C# solution might be to simple. You probably want to interactive with the change in your Blazor components. If so:

public static class JavaScriptCallbacks
{
    public delegate void StorageChangedHandler(string? key, string? oldValue, string? newValue);

    public static event StorageChangedHandler? OnStorageChanged;

    [JSInvokable]
    public static void LocalStorageChanged(string? key, string? oldValue, string? newValue)
    {
        OnStorageChanged?.Invoke(key, oldValue, newValue);

        Console.WriteLine($"Method MyMethod has been invoked with key: {key}");
    }
}

And then in you Blazor component:

   @implements IDisposable

    protected override void OnInitialized()
    {
        JavaScriptCallbacks.OnStorageChanged += OnStorageChangedCallback;
    }

    private void OnStorageChangedCallback(string? key, string? oldValue, string? newValue)
    {
        InvokeAsync(() => OnStorageChangedAsync(key, oldValue, newValue));
    }

    private async Task OnStorageChangedAsync(string? key, string? oldValue, string? newValue)
    {
        Console.WriteLine("Storage changed: " + key);
        StateHasChanged();
    }

    public void Dispose()
    {
        // Don't forget to unsubscribe when the component is disposed to avoid memory leaks.
        JavaScriptCallbacks.OnStorageChanged -= OnStorageChangedCallback;
    }