Local storage clear and remove (#1222)

reflex/.templates/web/utils/state.js

@@ -131,6 +131,16 @@ export const applyEvent = async (event, router, socket) => {
     return false;
   }
 
+  if (event.name == "_clear_local_storage") {
+    localStorage.clear();
+    return false;
+  }
+
+  if (event.name == "_remove_local_storage") {
+    localStorage.removeItem(event.payload.key);
+    return false;
+  }
+
   if (event.name == "_set_clipboard") {
     const content = event.payload.content;
     navigator.clipboard.writeText(content);

reflex/__init__.py

@@ -21,9 +21,11 @@ from .constants import Transports as Transports
 from .event import EVENT_ARG as EVENT_ARG
 from .event import EventChain as EventChain
 from .event import FileUpload as upload_files
+from .event import clear_local_storage as clear_local_storage
 from .event import console_log as console_log
 from .event import redirect as redirect
 from .event import remove_cookie as remove_cookie
+from .event import remove_local_storage as remove_local_storage
 from .event import set_clipboard as set_clipboard
 from .event import set_cookie as set_cookie
 from .event import set_focus as set_focus

reflex/event.py

@@ -290,6 +290,34 @@ def set_local_storage(key: str, value: str) -> EventSpec:
     )
 
 
+def clear_local_storage() -> EventSpec:
+    """Set a value in the local storage on the frontend.
+
+    Returns:
+        EventSpec: An event to clear the local storage.
+    """
+    return server_side(
+        "_clear_local_storage",
+        get_fn_signature(clear_local_storage),
+    )
+
+
+def remove_local_storage(key: str) -> EventSpec:
+    """Set a value in the local storage on the frontend.
+
+    Args:
+        key: The key identifying the variable in the local storage to remove.
+
+    Returns:
+        EventSpec: An event to remove an item based on the provided key in local storage.
+    """
+    return server_side(
+        "_remove_local_storage",
+        get_fn_signature(clear_local_storage),
+        key=key,
+    )
+
+
 def set_clipboard(content: str) -> EventSpec:
     """Set the text in content in the clipboard.
 

tests/test_event.py

@@ -204,3 +204,21 @@ def test_set_local_storage():
         format.format_event(spec)
         == 'E("_set_local_storage", {key:"testkey",value:"testvalue"})'
     )
+
+
+def test_clear_local_storage():
+    """Test the event clear_local_storage."""
+    spec = event.clear_local_storage()
+    assert isinstance(spec, EventSpec)
+    assert spec.handler.fn.__qualname__ == "_clear_local_storage"
+    assert not spec.args
+    assert format.format_event(spec) == 'E("_clear_local_storage", {})'
+
+
+def test_remove_local_storage():
+    """Test the event remove_local_storage."""
+    spec = event.remove_local_storage("testkey")
+    assert isinstance(spec, EventSpec)
+    assert spec.handler.fn.__qualname__ == "_remove_local_storage"
+    assert spec.args == (("key", "testkey"),)
+    assert format.format_event(spec) == 'E("_remove_local_storage", {key:"testkey"})'