LocalStorage as storage backend

[xaptronic]

I wrote this class that acts as a application storage that reads/writes to client LocalStorage. Is there interest in including this as a built in storage mechanism?

Example use

localStore = LocalStorageDict()
my_value = await localStore.get("my_value", False)

localStore["my_other_value"] = "some special value!"

Source:

from nicegui import ui
from nicegui.context import context
import json
from collections.abc import MutableMapping
import asyncio

class LocalStorageDict(MutableMapping):
    def __init__(self, storage_key: str = "nicegui_storage"):
        self._storage_key = storage_key
        self._data = {}
        self._initialized = asyncio.Event()
        self.client = context.client

    async def _ensure_initialized(self):
        if not self._initialized.is_set():
            # If not initialized, do the initialization
            await self._load_from_storage()
            self._initialized.set()

    async def _load_from_storage(self):
        """Load data from localStorage"""
        result = await self.client.run_javascript(
            f"""
            try {{
                const data = localStorage.getItem('{self._storage_key}');
                return data ? JSON.parse(data) : {{}};
            }} catch (error) {{
                console.warn('Could not load from localStorage:', error);
                return {{}};
            }}
        """,
            timeout=None,
        )
        self._data = result

    async def _save_to_storage(self):
        """Save current data to localStorage"""
        await self._ensure_initialized()

        json_data = json.dumps(self._data)
        await self.client.run_javascript(
            f"""
            try {{
                localStorage.setItem('{self._storage_key}', '{json_data}');
            }} catch (error) {{
                console.warn('Could not save to localStorage:', error);
            }}
        """,
            timeout=None,
        )

    async def __getitem__(self, key):
        await self._ensure_initialized()
        return self._data[key]

    def __setitem__(self, key, value):
        # Create a task to ensure initialization if needed
        async def init_and_save():
            await self._ensure_initialized()
            self._data[key] = value
            await self._save_to_storage()

        asyncio.create_task(init_and_save())

    def __delitem__(self, key):
        async def init_and_del():
            await self._ensure_initialized()
            del self._data[key]
            await self._save_to_storage()

        asyncio.create_task(init_and_del())

    def __iter__(self):
        # Note: This might need to be modified to be async as well
        return iter(self._data)

    def __len__(self):
        # Note: This might need to be modified to be async as well
        return len(self._data)

    async def get(self, key, default=None):
        await self._ensure_initialized()
        return self._data.get(key, default)

    async def clear(self):
        await self._ensure_initialized()
        self._data.clear()
        asyncio.create_task(self._save_to_storage())

    async def update(self, other=None, **kwargs):
        await self._ensure_initialized()
        if other:
            if isinstance(other, MutableMapping):
                for k in other:
                    self._data[k] = other[k]
            else:
                for k, v in other:
                    self._data[k] = v
        for k, v in kwargs.items():
            self._data[k] = v
        asyncio.create_task(self._save_to_storage())

[rodja]

Wow. Thanks @xaptronic. This could be very helpful indeed. But it also is not as simple, I guess. We need to think about serialization and most important: naming. How would the storage be accessed? app.storage.local might be misleading for people not familiar with the html5 localStorage feature.