35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Client-storage
|
|
|
|
You can use the browser's local storage to persist state between sessions.
|
|
This allows user preferences, authentication cookies, other bits of information
|
|
to be stored on the client and accessed from different browser tabs.
|
|
|
|
A client-side storage var looks and acts like a normal `str` var, except the
|
|
default value is either `rx.Cookie` or `rx.LocalStorage` depending on where the
|
|
value should be stored. The key name will be based on the var name, but this
|
|
can be overridden by passing `name="my_custom_name"` as a keyword argument.
|
|
|
|
For more information see [Browser Storage](/docs/api-reference/browser/).
|
|
|
|
Try entering some values in the text boxes below and then load the page in a separate
|
|
tab or check the storage section of browser devtools to see the values saved in the browser.
|
|
|
|
```python demo exec
|
|
class ClientStorageState(rx.State):
|
|
my_cookie: str = rx.Cookie("")
|
|
my_local_storage: str = rx.LocalStorage("")
|
|
custom_cookie: str = rx.Cookie(name="CustomNamedCookie", max_age=3600)
|
|
|
|
|
|
def client_storage_example():
|
|
return rx.vstack(
|
|
rx.hstack(rx.text("my_cookie"), rx.chakra.input(value=ClientStorageState.my_cookie, on_change=ClientStorageState.set_my_cookie)),
|
|
rx.hstack(rx.text("my_local_storage"), rx.chakra.input(value=ClientStorageState.my_local_storage, on_change=ClientStorageState.set_my_local_storage)),
|
|
rx.hstack(rx.text("custom_cookie"), rx.chakra.input(value=ClientStorageState.custom_cookie, on_change=ClientStorageState.set_custom_cookie)),
|
|
)
|
|
```
|