Enhance User Experience by Saving Your Website’s Theme Using Local Storage.

{{article-details}}

You might have noticed my website has both ‘light’ and ‘dark’ themes. If you have been clicking around for some time, you would have also noticed that the theme you set (or the default ‘light’ theme) remains as you navigate from one page to another. Moreover, if you close this window and revisit my website later, the last selected theme will still be applied. This article is a step-by-step guide on how to achieve this using the <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code> property.

Note: This article assumes that the reader has already set up and styled the toggle switch using HTML and CSS. This article will only focus on implementing the functionality of saving and retrieving the theme using localStorage in JavaScript.

{{audience-banner}}

What is <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>?

Simply put, the local storage feature allows websites to save and retrieve data from your browser. The data is saved even if the user reloads the page or closes the window. The great thing about <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code> is that you don’t need any backend logic to save data in the browser. It doesn’t need the help of any web server to work, making it simple to set up.

However, because <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code> lacks the security features of web servers, it should never be used to store sensitive information like form data.

How does it work?

There are different ways to interact with <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>. They are -

  • <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">setItem()</code> :  This method is used to store data in local storage.
  • <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">removeItem()</code> : This method removes an item from local storage.
  • <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">removeItem()</code> : This method removes an item from local storage.
  • <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">clear()</code> : This method clears all data from local storage.

In this article, we are only going to look at the <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">setItem()</code> and <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">getItem()</code> methods.

The <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">setItem()</code> method

This method is used to store data in <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>. This method takes 2 parameters, a <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">key</code> and a <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">value</code>. You can give any name to your key as long as it does not exist in <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>. If the key already exists, then it will update its value to the new value. This is how you store a theme using <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">setItem()</code> method.

Storing the theme using <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">setItem()</code>

Assume the theme toggle is a checkbox and is given an <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">id</code> attribute of ‘theme’. Once the checkbox is checked, an attribute of <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">website-theme</code> is set on the body element (makes the code readable) and the theme value is stored to <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>.

const themeToggle = document.getElementById('theme'); //Get the theme toggle checkbox element
themeToggle.addEventListener('change', () => {
	const newTheme = themeToggle.checked ? 'dark' : 'light'; // Determine the new theme based on whether the checkbox is checked or not
	document.body.setAttribute('website-theme', newTheme); // Set the 'website-theme' attribute on the body element to the new theme
	localStorage.setItem('theme', newTheme); // Save the new theme to localStorage
})

The <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">getItem()</code> method

As the name suggests, this method is used to get/retrieve the saved data from <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>.This method only takes 1 parameter, the <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">key</code>. If the key is found in the <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>, it’ll return the value of the key, else it will return <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">null</code>.

Retrieving the theme using <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">getItem()</code>

The stored theme is retrieved using the <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">getItem()</code> method. If the theme is retrieved, it is also crucial to ensure the checkbox is set to the correct state based on the retrieved theme. If the checkbox state is not correctly set, the theme may not switch as expected when the page loads.

const retrievedTheme = localStorage.getItem('theme'); // Retrieve the stored theme from localStorage
if(retrievedTheme) {
	themeToggle.checked = retrievedTheme === 'dark'; // Set the checked state of the themeSwitch checkbox based on whether the retrieved theme is 'dark'
}

Putting it all together

const themeToggle = document.getElementById('theme');
themeToggle.addEventListener('change', () => { 
	const newTheme = themeToggle.checked ? 'dark' : 'light';
	document.body.setAttribute('website-theme', newTheme);
	localStorage.setItem('theme', newTheme);
})

const retrievedTheme = localStorage.getItem('theme');
if(retrievedTheme) {
	themeToggle.checked = retrievedTheme === 'dark';
}

Lastly, <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code> is supported by all major browsers.

Deep dive into <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>

The below links are some great resources to learn more about <code class = "code__text" style = "background-color: var(--colors-light--code-block);  color: var(--colors-light--code); border-radius: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem;">localStorage</code>