Using Local Storage with Svelte Stores in SvelteKit

Using Local Storage with Svelte Stores

Using Local Storage with Svelte Stores in SvelteKit


🖥 Using Local Storage with Site Themes

In this video we look at how you might use Local Storage with SvelteKit to keep track of which theme a user prefers on your site. It is becoming more common to have light and dark themes on sites. This makes it a great time to look at how you can use Local Storage with Svelte stores to implement the functionality. We start by comparing Local Storage to Session Storage and cookies. We then look at a naïve implementation and finally a reusable, scalable implementation leveraging Svelte stores. On top we see how you can debug Local Storage code using browser developer tools.

I hope there's at least one thing you find interesting in there. If there is then why don't roll the video!

📹 Using Local Storage with Svelte Stores: Video

Using Local Storage with Svelte Stores

🗳️ Poll

How familiar are you with Cookies, Local Storage and Session Storage?
Voting reveals latest results.

🖥 Using Local Storage with Site Themes: Code

Svelte Store linked to Local Storage

1import { browser } from '$app/env';
2import { writable } from 'svelte/store';
4const defaultValue = 'summer';
5const initialValue = browser ? window.localStorage.getItem('theme') ?? defaultValue : defaultValue;
7export const theme = writable<string>(initialValue);
9theme.subscribe((value) => {
10 if (browser) {
11 window.localStorage.setItem('theme', value);
12 }
15export { theme as default };

Reading from the Store

1<script lang="ts">
2 import Card from '$lib/components/Card.svelte';
3 import theme from '$lib/shared/stores/theme';
4 import '$lib/styles/styles.css';
5 import { summerTheme } from '$lib/styles/themes/summerTheme.css';
6 import { winterTheme } from '$lib/styles/themes/winterTheme.css';
7 import { heading, main } from './index.css';
9 $: themeIsSummer = $theme === 'summer';
10 $: currentTheme = themeIsSummer ? summerTheme : winterTheme;
13<!-- svelte-ignore component-name-lowercase -->
14<main class={`${main} ${currentTheme}`}>
15 <Card>
16 <h1 class={heading}>SvelteKit Local Storage</h1>
17 </Card>

Writing to the Store

1<script lang="ts">
2 import theme from '$lib/shared/stores/theme';
3 import '$lib/styles/styles.css';
4 import { summerTheme } from '$lib/styles/themes/summerTheme.css';
5 import { winterTheme } from '$lib/styles/themes/winterTheme.css';
6 import '@fontsource/source-sans-pro/400.css';
7 import '@fontsource/source-serif-pro/400.css';
8 import { container, containerMain, header, themeButton } from './layout.css';
10 $: themeIsSummer = $theme === 'summer';
11 $: currentTheme = themeIsSummer ? summerTheme : winterTheme;
12 $: buttonText = themeIsSummer ? 'Summer theme' : 'Winter theme';
13 $: buttonAriaLabel = themeIsSummer ? 'Switch to Winter theme' : 'Switch to Summer theme';
14 $: buttonStyle = `${themeButton} ${currentTheme}`;
17<div class={`${container} ${containerMain} ${currentTheme}`}>
18 <!-- svelte-ignore component-name-lowercase -->
19 <header class={header}>
20 <button
21 aria-label={buttonAriaLabel}
22 class={buttonStyle}
23 on:click={() => (themeIsSummer ? theme.set('winter') : theme.set('summer'))}
24 >{buttonText}</button
25 >
26 </header>
27 <slot />

🙏🏽 Feedback

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.