• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

107
Vistas
Create localStorage entries from object of objects?

I am trying to create localStorage items from an object of objects using SvelteKit.

Below you can see the code with more details:

// FILE: settings.js
// Imported by my main file +page.svelte and the Settings.svelte component. The selected property of each object is bound to a select html element inside Settings.svelte.

import { browser } from '$app/env';
import { writable} from 'svelte/store';

export const settings = writable({
    speed: {
        options: ['slow', 'medium', 'fast'],

        // Each selected property of an object should be bound to a localStorage
        // Example: speedLocal : 'slow'

        selected: 'slow'
    },
    sound: {
        options: ['on', 'off'],
        selected: 'on'
    },
    tiles: {
        options: [4, 6, 8],
        selected: 4
    },
    theme: {
        options: ['light', 'dark'],
        selected: 'light'
    },
})
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

First of all, it is not a good idea to mix mutable state with fixed values like this. There is no reason for the options to exist in a writable store if they cannot change.

As for how to make this more convenient: You can store all values in a single object and serialize it as JSON.

The most basic example:

import { browser } from '$app/env';
import { readable, writable } from 'svelte/store';

function localStorageStore(key, initial) {
    if (browser == false)
        return readable(initial);

    const value = localStorage.getItem(key)
    const store = writable(value == null ? initial : JSON.parse(value));
    
    store.subscribe(v => localStorage.setItem(key, JSON.stringify(v)));
    
    return store;
}

const options = {
    speed: ['slow', 'medium', 'fast'],
    sound: ['on', 'off'],
    tiles: [4, 6, 8],
    theme: ['light', 'dark'],
}

const settings = localStorageStore('so.lss', {
    speed: 'slow',
    sound: 'on',
    tiles: 4,
    theme: 'light',
});

Since the localStorage access is encapsulated in a function anyway, you could also easily create a store for each option individually.

If you want a generic way to use options and settings together, you can just iterate via Object.entries, e.g.

{#each Object.entries(options) as [key, items]}
    <select bind:value={$settings[key]}>
        {#each items as item}
            <option value={item}>{item}</option>
        {/each}
    </select>
{/each}

Note: The store implementation is just for illustrative purposes. You would probably want a more complex mechanism that handles:

  • Non primitive types, e.g. this will fail for Date objects, as they will not be parsed back to a Date.
  • Versioning and migration of values. As soon as you want to change the format of a setting, you will have to deal with outdated values existing on user machines.
  • The storage event, if the store should be synchronized across multiple tabs.

If you must keep that object format, you can also just re-map it into its components:

const configuration = {
    speed: {
        options: ['slow', 'medium', 'fast'],
        selected: 'slow'
    },
    sound: {
        options: ['on', 'off'],
        selected: 'on'
    },
    tiles: {
        options: [4, 6, 8],
        selected: 4
    },
    theme: {
        options: ['light', 'dark'],
        selected: 'light'
    },
};

const options = Object.fromEntries(
    Object.entries(configuration)
        .map(([key, value]) => [key, value.options])
);

const settings = localStorageStore(
    'so.lss',
    Object.fromEntries(
        Object.entries(configuration)
            .map(([key, value]) => [key, value.selected])
    )
);

options/settings will be equivalent to the first example.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda