sveltekit-persistent-store.js

import { writable } from "svelte/store";
import { browser } from "$app/environment";

//string
export const userName = writable(
  (browser && localStorage.getItem("userName")) || "hello world"
);
userName.subscribe((val) => browser && (localStorage.userName = val));

// array
const storedFruits = JSON.parse(browser && localStorage.getItem("fruits")) || [
  "apple",
  "orange",
  "grapes",
];
export const fruits = writable(browser && storedFruits);
fruits.subscribe(
  (val) => browser && (localStorage.fruits = JSON.stringify(val))
);

// object
const storedUser = JSON.parse(browser && localStorage.getItem("user")) || {
  name: "username",
  id: "123",
};
export const user = writable(browser && storedUser);
user.subscribe(
  (val) => browser && (localStorage.user = JSON.stringify(val))
);

Nice one, thanks.

In the snippet above, the stores don't get an initial default value set during server-side rendering.

Changing the brackets location ensures that a default value is set at page load:

export const userName = writable(
  (browser && localStorage.getItem("userName")) || "webjeda"
);

(remark: technically, the brackets are not even needed).

Nice one, thanks.

In the snippet above, the stores don't get an initial default value set during server-side rendering.

Changing the brackets location ensures that a default value is set at page load:

export const userName = writable(
  (browser && localStorage.getItem("userName")) || "webjeda"
);

(remark: technically, the brackets are not even needed).

Thanks!