persistent settings for Svelte

settings.js

// A writable settings/data store backed by localStorage
import { writable } from 'svelte/store'

const createWritableStore = (key, startValue) => {
  const { subscribe, set } = writable(startValue)
  return {
    subscribe,
    set,
    useLocalStorage: () => {
      const json = localStorage.getItem(key)
      if (json) {
        let parsed_json = ""
        try {
          parsed_json = JSON.parse(json)
        } catch (e) {
          console.log('Error parsing json:')
          console.log(e)
        }
        if (parsed_json) {
          set(parsed_json)
        }
      }
      subscribe(val => {
        localStorage.setItem(key, JSON.stringify(val))
      })
    }
  }
}

export const settings = createWritableStore('settings', {})

usage.svelte

<script>
  import { onMount } from 'svelte';

  import { settings } from 'settings.js'
  settings.useLocalStorage()
  
  let data
  
  function loadSettings() {
    if ($settings && $settings.data) {
      data = $settings.data
    }
  }

  function saveSettings() {
    if (data && $settings) {
      $settings.data = data
    }
  }

  onMount(async () => {
    loadSettings()
  })
</script>

Data: {data}