`ftd.local_storage` simplifies the process of working with Local Storage in your `fastn` projects. It functions as a wrapper around the browser's Local Storage API, facilitating the storage and retrieval of data in the client-side storage of your users' web browsers. `ftd.local_storage` also provides namespacing for local storage, which prevents naming collisions when multiple packages in your project are using local storage.

Saving Data in Local Storage

To store data, use ftd.local_storage.set(key, value). It securely saves data in your browser's Local Storage for later use. The 'value' can be of any 'fastn' [data type](/built-in-types/), including 'fastn' ['records'](ftd/record/).

Usage

Input

-- ftd.text: Save name
color: $inherited.colors.text-strong
$on-click$: save-data()

-- void save-data():

ftd.local_storage.set("name", "Universe")

Lang:

ftd

Output

Save name

Retrieving Data from Local Storage

Access stored information with ftd.local_storage.get(key). It's a simple way to get your data back from Local Storage.

Usage

Input

-- string $name: World

-- ftd.text: $name
color: $inherited.colors.text

-- ftd.text: Get name
color: $inherited.colors.text-strong
$on-click$: get-data($a = $name)

-- void get-data(a):
string $a:

name = ftd.local_storage.get("name", "Universe");
__args__.a.set(name || "Empty");

Lang:

ftd

Output

World

Get name

Deleting Data from Local Storage

Remove specific data entries using ftd.local_storage.delete(key). This function makes cleaning up data in Local Storage easy. In the example below, when you click on the 'Get name' button, if the name has not been deleted yet and was previously set using the `ftd.local_storage.set(k, v)` method, it will display that name. Now, if you click on the 'Delete name' button and then click on the 'Get name' button again, this time it will display 'Empty' because the data was deleted.

Usage

Input

-- string $name: World

-- ftd.text: $name
color: $inherited.colors.text

-- ftd.text: Get name
color: $inherited.colors.text-strong
$on-click$: get-data($a = $name)

-- ftd.text: Delete name
color: $inherited.colors.text-strong
$on-click$: $delete-data()

-- void get-data(a):
string $a:

name = ftd.local_storage.get("name", "Universe");
__args__.a.set(name || "Empty");

-- void delete-data(a):
string $a:

ftd.local_storage.delete("name")

Lang:

ftd

Output

World

Get name

Delete name

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.