Skip to content

Commit

Permalink
feat: implement local storage
Browse files Browse the repository at this point in the history
* doc: write documentation about interaction with local storage
  • Loading branch information
FabienArcellier committed Dec 26, 2024
1 parent e57612c commit 5aa4b0b
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 3 deletions.
42 changes: 40 additions & 2 deletions docs/framework/frontend-scripts.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: "Frontend scripts"
title: "Frontend actions"
---

Framework can import custom JavaScript/ES6 modules from the front-end. Module functions can be triggered from the back-end.
Framework can interact with frontend to import custom JavaScript/ES6 modules, set data into local storage, trigger module functions, ...

## Importing an ES6 module

Expand Down Expand Up @@ -85,6 +85,44 @@ initial_state = wf.init_state({
initial_state.import_script("lodash", "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js")
```

## Local storage

Framework provides functions to interact with browser's local storage. This mechanism allows information such as user preferences to be persisted between several sessions.

* `state.local_storage_set_item(key, value)`: set a value in local storage.
* `state.local_storage_remove_item(key)`: remove a key from local storage.

```python
# Event handler register on root:wf-app-open
def on_app_open(state, session):
state['last_visit'] = session['local_storage'].get('last_visit', "")
state['dark_mode'] = session['local_storage'].get('dark_mode', "False") == "True"
state.local_storage_set_item("last_visit", str(datetime.now()))


def on_dark_mode_toggle(state, payload):
state['dark_mode'] = payload
state.local_storage_set_item("dark_mode", str(state['dark_mode']))


initial_state = wf.init_state({
"last_visit": "",
"dark_mode": False
})
```

<Warning>
Framework propose a binding on [Local storage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). It support only raw value. Your application has to serialize the data before storing it. Framework won't do it for you.
</Warning>

<Warning>
Local storage is not secure and should not be used to store sensitive data without encryption. It's accessible to anyone with access to the user's device.
</Warning>

<Info>
Content of local storage is loaded in `session` on the init request. If a JS function change a value inside, it won't be reflected. Change from the backend are reflected.
</Info>

## Frontend core

<Warning>
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/sessions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Sessions are designed for advanced use cases, being most relevant when Framework

You can access the session's unique id, HTTP headers and cookies from event handlers via the `session` argument —similarly to how `state` and `payload` are accessed. The data made available here is captured in the HTTP request that initialised the session.

The `session` argument will contain a dictionary with the following keys: `id`, `cookies` and `headers`. Values for the last two are themselves dictionaries.
The `session` argument will contain a dictionary with the following keys: `id`, `cookies`, `headers` and `local_storage`. Values for the last three are themselves dictionaries.

```py
# The following will output a dictionary
Expand Down

0 comments on commit 5aa4b0b

Please sign in to comment.