How to Save Writable Store in Svelte to Local Storage

How to Save Writable Store in Svelte to Local Storage

Learn how to create a persistent store in Svelte
Ferenc Almasi • 2023 January 27 • šŸ“– 5 min read
  • twitter
  • facebook

Stores in Svelte are special objects that have aĀ subscribeĀ method that allows interested parties to be notified whenever the store's value changes. AĀ writeableĀ store also has anĀ update, andĀ setĀ methods so that it can be modified.

The reason stores are a perfect fit for persisting state, is that they can be accessed anywhere, globally, from multiple unrelated components. This way, we are going to have a centralized place where we can store our application's state.

Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.
Master Svelte

Connect the Writable Store To Local Storage

To connect a writable store in Svelte to local storage, we need two things; a file, let's call itĀ state.js and writableĀ imported from svelte/store, as well as a reference to a local storage item, in this case, called "state":

import { writable, get } from 'svelte/store'

const localState = localStorage.getItem('state')
const initialState = {
    users: []
}

if (!localState) {
    // Set localStorage "state" to the "initialState"
}

const appState = localState ? JSON.parse(localState) : initialState

export const state = writable(appState)
export const update = callback => {
    const updatedState = callback(get(state))

    state.update(() => updatedState)
    localStorage.setItem('state', JSON.stringify(updatedState))
}
state.js How to connect a writable store to local storage
Copied to clipboard!

Don't forget to use JSON.parse and JSON.stringify to correctly write and read local storage.

Let’s briefly discuss what this code actually does:

  • First, we import the built-inĀ writableĀ store fromĀ svelte/store.
  • Starting from line:4, our initial state will hold an empty users array. This is where you can set up all initial fields, such as a user or settings object.
  • On line:12, we can use this initial state to set ourĀ localStateĀ in case we don't have any data yet. This will only be true for the very first use.
  • We export the state that we will access from other components (line:14).
  • Below it, we also export anĀ updateĀ function that we will use to update the state.

We are also missing a line between the if statement. Try to guess how to set theĀ stateĀ insideĀ localStorageĀ to theĀ initialStateĀ variable.

localStorage.setItem('state', JSON.stringify(initialState))
state.js Setting the local storage state to our initial state
Copied to clipboard!

For passing the correct state to the writable store (called appState), we want two things to happen, based on whether we already have information in local storage or not:

  • UseĀ localStateĀ when it's available, meaning we already have data saved in local storage.
  • Use theĀ initialStateĀ when no data is available inside local storage yet.

TheĀ updateĀ function that we exported will update both the internal state of the application, as well as the data stored inside local storage. It will use a callback function and the built-inĀ getĀ method of Svelte.


How to Read and Update the State

Now let's see how we can actually read and update our state. Since our state will reference a writable store, in order to get its value, we need to use the built-inĀ getĀ function. Take a look at the following example of what we will get if we try to log the state with and without using theĀ getĀ function:

<script>
  import { get } from 'svelte/store'
  import { state } from './state'
</script>

<!-- āŒ This will output: {} -->
<pre>State without get: {JSON.stringify(state)}</pre>

<!-- āœ”ļø This will output: { users: [] } -->
<pre>State with get: {JSON.stringify(get(state))}</pre>
Read.svelte How to read the state
Copied to clipboard!

As we can see, without using get, we get an empty object back, and not our actual state.Ā This is why we need to use the built-inĀ getĀ function. There is also another alternative, simpler way to get the value of a store in Svelte.

The $ symbol

<ul>
    {#each $state.users as user}
        <li>{user.id}: {user.name}</li>
    {/each}
</ul>
Prefix stores with $ to read their value
Copied to clipboard!

Notice the dollar sign in front of the state. This is an alternative, simpler approach that we can use in place of theĀ getĀ method to read values from our store. Now let's take a look at how to update our persistent state.

Updating the state

For updating the state, we need to import ourĀ updateĀ method and pass a callback function to set the state. Take a look at the following example:

<script>
    import { update } from './state'

    const addUser = () => {
        update(state => {
            state.users.unshift({
                id: state.users.length + 1,
                name: 'John'
            })

            return state
        })
    }
</script>
Update.svelte Updating the state using the update method
Copied to clipboard!

Notice that at the end of ourĀ updateĀ function, we need to return the state, as we expect it in ourĀ state.jsĀ file. Anything we return from our update function will be applied to our state and persisted through page reloads. As a reminder, this is how state.js executes the callback function:

// The `updatedState` is then passed over to both the store and local storage
const updatedState = callback(get(state))
state.js How state.js calls the callback function
Copied to clipboard!
Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.
Master Svelte

Conclusion

In conclusion, in order to persist state with Svelte stores using local storage, we need to read local storage and pass its value to a writable store. To also update the store, we can use the update method on the writeable store with a custom update function that keeps track of both the writable store, as well as local storage to persist the state of our application.

  • twitter
  • facebook
Did you find this page helpful?
šŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended