Sapper localStorage Example

README.md

This Gist shows one method of setting up localStorage with Sapper using if (process.browser).

Here is the assumed file structure inside the src directory used in this Gist:

└── src
    ├── components
    │   └── Btn.svelte
    ├── routes
    │   └── _layout.svelte
    └── stores
        └── store.js

_layout.svelte

<script>
  import { country } from '../stores/local-store.js';
  import Btn from '../components/Btn.svelte';
  
  // Make sure we're running on the client
  if (process.browser) {
    // Before we can use set on country we need to call the
    // useLocalStorage doing this at the _layout file makes
    // all routes and components exposed to this so we can
    // import the state and call set anywhere like Btn.svelte
    country.useLocalStorage();
    
    // Log it to make sure it works client side
    console.log(localStorage.getItem('country'))
  }
</script>

<p>Current country is {$country}</p>

<Btn location="USA" />
<Btn location="CA" />
<Btn location="MX" />

Btn.svelte

<script>
  import { country } from '../stores/local-store.js;
  export let location;
  
  function setCountry(value) {
    // We can use this here because _layout calls useLocalStorage for country.
    // If you have multiple variables to store each will need to be called 
    // in the same way in the _layout file.
    country.set(value);
  }
</script>

<button on:click={()=> setCountry(location)}>Select {location}</button>

local-store.js

import { writable } from 'svelte/store';

const createLocalStore = (key, startValue) => {
  const {
    subscribe,
    set,
    update
  } = writable(startValue);

  return {
    subscribe,
    set,
    update,
    useLocalStorage: () => {
      const json = localStorage.getItem(key);
      if (json) {
        set(JSON.parse(json));
      }

      subscribe(current => {
        localStorage.setItem(key, JSON.stringify(current));
      });
    }
  };
}


// If localStorage has the key then it will be used
// if not the default will be used. Format:
// export const var = createLocalStore(key, default)
export const country = createLocalStore('country', 'CA');

Wonderful, thanks!

If anyone is having trouble still, you can try the onMount method from Svelte in lieu of process.browser. Then, the rest is the same.

import {onMount} from "svelte";`

// Make sure we're running on the client
onMount(() => { 
    // Before we can use set on country we need to call the 
    // useLocalStorage doing this at the _layout file makes 
    // all routes and components exposed to this so we can 
    // import the state and call set anywhere like Btn.svelte 
    country.useLocalStorage();
    // Log it to make sure it works client side 
    console.log(localStorage.getItem('country')) 
}