192 lines
5.2 KiB
Markdown
192 lines
5.2 KiB
Markdown
# Browser Storage
|
|
|
|
## rx.Cookie
|
|
|
|
Represents a state Var that is stored as a cookie in the browser. Currently only supports string values.
|
|
|
|
Parameters
|
|
|
|
- `name` : The name of the cookie on the client side.
|
|
- `path`: The cookie path. Use `/` to make the cookie accessible on all pages.
|
|
- `max_age` : Relative max age of the cookie in seconds from when the client receives it.
|
|
- `domain`: Domain for the cookie (e.g., `sub.domain.com` or `.allsubdomains.com`).
|
|
- `secure`: If the cookie is only accessible through HTTPS.
|
|
- `same_site`: Whether the cookie is sent with third-party requests. Can be one of (`True`, `False`, `None`, `lax`, `strict`).
|
|
|
|
```python
|
|
class CookieState(rx.State):
|
|
c1: str = rx.Cookie()
|
|
c2: str = rx.Cookie('c2 default')
|
|
|
|
# cookies with custom settings
|
|
c3: str = rx.Cookie(max_age=2) # expires after 2 second
|
|
c4: str = rx.Cookie(same_site='strict')
|
|
c5: str = rx.Cookie(path='/foo/') # only accessible on `/foo/`
|
|
c6: str = rx.Cookie(name='c6-custom-name')
|
|
```
|
|
|
|
## rx.remove_cookies
|
|
|
|
Remove a cookie from the client's browser.
|
|
|
|
Parameters:
|
|
|
|
- `key`: The name of cookie to remove.
|
|
|
|
```python
|
|
rx.button(
|
|
'Remove cookie', on_click=rx.remove_cookie('key')
|
|
)
|
|
```
|
|
|
|
This event can also be returned from an event handler:
|
|
|
|
```python
|
|
class CookieState(rx.State):
|
|
...
|
|
def logout(self):
|
|
return rx.remove_cookie('auth_token')
|
|
```
|
|
|
|
## rx.LocalStorage
|
|
|
|
Represents a state Var that is stored in localStorage in the browser. Currently only supports string values.
|
|
|
|
Parameters
|
|
|
|
- `name`: The name of the storage key on the client side.
|
|
|
|
```python
|
|
class LocalStorageState(rx.State):
|
|
# local storage with default settings
|
|
l1: str = rx.LocalStorage()
|
|
|
|
# local storage with custom settings
|
|
l2: str = rx.LocalStorage("l2 default")
|
|
l3: str = rx.LocalStorage(name="l3")
|
|
```
|
|
|
|
## rx.remove_local_storage
|
|
|
|
Remove a local storage item from the client's browser.
|
|
|
|
Parameters
|
|
|
|
- `key`: The key to remove from local storage.
|
|
|
|
```python
|
|
rx.button(
|
|
'Remove Local Storage',
|
|
on_click=rx.remove_local_storage('key'),
|
|
)
|
|
```
|
|
|
|
This event can also be returned from an event handler:
|
|
|
|
```python
|
|
class LocalStorageState(rx.State):
|
|
...
|
|
def logout(self):
|
|
return rx.remove_local_storage('local_storage_state.l1')
|
|
```
|
|
|
|
## rx.clear_local_storage()
|
|
|
|
Clear all local storage items from the client's browser. This may affect other
|
|
apps running in the same domain or libraries within your app that use local
|
|
storage.
|
|
|
|
```python
|
|
rx.button(
|
|
'Clear all Local Storage',
|
|
on_click=rx.clear_local_storage(),
|
|
)
|
|
```
|
|
|
|
# Serialization Strategies
|
|
|
|
If a non-trivial data structure should be stored in a `Cookie` or `LocalStorage` var it needs to
|
|
be serialized before and after storing it. It is recommended to use `rx.Base` for the data
|
|
which provides simple serialization helpers and works recursively in complex object structures.
|
|
|
|
```python demo exec
|
|
import reflex as rx
|
|
|
|
|
|
class AppSettings(rx.Base):
|
|
theme: str = 'light'
|
|
sidebar_visible: bool = True
|
|
update_frequency: int = 60
|
|
error_messages: list[str] = []
|
|
|
|
|
|
class ComplexLocalStorageState(rx.State):
|
|
data_raw: str = rx.LocalStorage("{}")
|
|
data: AppSettings = AppSettings()
|
|
settings_open: bool = False
|
|
|
|
def save_settings(self):
|
|
self.data_raw = self.data.json()
|
|
self.settings_open = False
|
|
|
|
def open_settings(self):
|
|
self.data = AppSettings.parse_raw(self.data_raw)
|
|
self.settings_open = True
|
|
|
|
def set_field(self, field, value):
|
|
setattr(self.data, field, value)
|
|
|
|
|
|
def app_settings():
|
|
return rx.chakra.form(
|
|
rx.foreach(
|
|
ComplexLocalStorageState.data.error_messages,
|
|
rx.text,
|
|
),
|
|
rx.chakra.form_label(
|
|
"Theme",
|
|
rx.chakra.input(
|
|
value=ComplexLocalStorageState.data.theme,
|
|
on_change=lambda v: ComplexLocalStorageState.set_field("theme", v),
|
|
),
|
|
),
|
|
rx.chakra.form_label(
|
|
"Sidebar Visible",
|
|
rx.chakra.switch(
|
|
is_checked=ComplexLocalStorageState.data.sidebar_visible,
|
|
on_change=lambda v: ComplexLocalStorageState.set_field(
|
|
"sidebar_visible",
|
|
v,
|
|
),
|
|
),
|
|
),
|
|
rx.chakra.form_label(
|
|
"Update Frequency (seconds)",
|
|
rx.chakra.number_input(
|
|
value=ComplexLocalStorageState.data.update_frequency,
|
|
on_change=lambda v: ComplexLocalStorageState.set_field(
|
|
"update_frequency",
|
|
v,
|
|
),
|
|
),
|
|
),
|
|
rx.button("Save", type="submit"),
|
|
on_submit=lambda _: ComplexLocalStorageState.save_settings(),
|
|
)
|
|
|
|
def app_settings_example():
|
|
return rx.fragment(
|
|
rx.chakra.modal(
|
|
rx.chakra.modal_overlay(
|
|
rx.chakra.modal_content(
|
|
rx.chakra.modal_header("App Settings"),
|
|
rx.chakra.modal_body(app_settings()),
|
|
),
|
|
),
|
|
is_open=ComplexLocalStorageState.settings_open,
|
|
on_close=ComplexLocalStorageState.set_settings_open(False),
|
|
),
|
|
rx.button("App Settings", on_click=ComplexLocalStorageState.open_settings),
|
|
)
|
|
```
|