🖥 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 in-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 #
Please enable JavaScript to watch the video 📼
🗳 Poll #
🖥 Using Local Storage with Site Themes: Code #
Svelte Store linked to Local Storage #
1 import { browser } from '$app/environment';2 import { writable } from 'svelte/store';34 const defaultValue = 'summer';5 const initialValue = browser ? window.localStorage.getItem('theme') ?? defaultValue : defaultValue;67 const theme = writable<string>(initialValue);89 theme.subscribe((value) => {10 if (browser) {11 window.localStorage.setItem('theme', value);12 }13 });1415 export default theme;
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';89 $: themeIsSummer = $theme === 'summer';10 $: currentTheme = themeIsSummer ? summerTheme : winterTheme;11 </script>1213 <!-- svelte-ignore component-name-lowercase -->14 <main class="{main} {currentTheme}">15 <Card>16 <h1 class={heading}>SvelteKit Local Storage</h1>17 </Card>18 </main>
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';910 $: 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 </script>1516 <div class="{container} {containerMain} {currentTheme}">17 <!-- svelte-ignore component-name-lowercase -->18 <header class={header}>19 <button20 aria-label={buttonAriaLabel}21 class="{themeButton} {currentTheme}"22 on:click={() => (themeIsSummer ? theme.set('winter') : theme.set('summer'))}23 >{buttonText}</button24 >25 </header>26 <slot />27 </div>
🔗 Using Local Storage with Svelte Stores: Links #
- Using vanilla-extract and themes in SvelteKit,
- Using Session Storage with SvelteKit,
- Using HTTP cookies to store user session data with SvelteKit,
- Full code for the demo site shown in the video ,
- Svelte stores tutorial ,
- MDN Local Storage docs ,
- MDN Web Storage docs .
🏁 Using Local Storage with Svelte Stores: Summary #
What are the main differences between Local Storage, Session Storage and Cookies? #
- Local Storage, Session Storage and cookies all offer ways to store user preferences and information in a browser for your website. You might use them to store the user’s preferred colour theme or cookie banner preferences. Local Storage and Session Storage are accessible from any JavaScript code running in the browser, which makes them unsuitable for storing sensitive information. That is because you run the risk that this data is leaked in a cross-site attack. Local Storage and Session Storage are however fine for storing preferences like preferred colour theme. Both store data in a segregated store for each origin (server domain). Local Storage is better suited to storing user preferences, as it persists when the user closes and later reopens their browser. You might use Session Storage for temporarily caching form data. Finally, use cookies for sensitive data (e.g. user session credentials), but set these from your server, setting the Http-only header. That will stop data being read by JavaScript code running in the user’s browser.
What is a Svelte store? #
- Svelte stores are a convenient way of storing app state and sharing it between remote components. As an example, instead of passing your user’s chosen colour theme from a layout component down through several layers of components, you just place it in the store. The store acts as a single source of truth, and any component which needs access can easily get access and even modify the centrally stored data. Svelte stores require minimal code to set up but offer advanced features in case you need. Examples are adding custom modifiers and deriving the value of one store from another. You can also create a readable store for cases where a preference might be read automatically and never need updating.
How can you set site theme using Local Storage with SvelteKit? #
- You can combine the Local Storage API with a writable Svelte store to track a user’s colour theme preference. Whenever they hit the toggle button, the value gets written to the store, which in turn adds the choice to Local Storage. That way, when the user next visits your site, the choice is pulled from Local Storage into the fresh instance of the Svelte store and the user has the colour theme they prefer. Only a few lines of code are needed. First set up the theme store. Then read a value as $theme. Finally, you can update the value using theme.set('dark') as an example.
🙏🏽 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.
Just updated the video where we look at using the Local Storage API with Svelte stores for theming.
— Rodney (@askRodney) August 22, 2022
Hope you find it useful!
#learnsvelte #askRodney #awholenewsveltehttps://t.co/tgTwlR3vlV
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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.