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

Published on Jun 16, 2024
4-minute read

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 localStorage 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.

This article is for front-end developers and enthusiasts who have a good understanding of JavaScript concepts like variables, event listeners, and DOM manipulation.

What is localStorage?

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 localStorage 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 localStorage 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 localStorage. They are -

  • setItem() : This method is used to store data in local storage.
  • removeItem() : This method removes an item from local storage.
  • removeItem() : This method removes an item from local storage.
  • clear() : This method clears all data from local storage.

In this article, we are only going to look at the setItem() and getItem() methods.

The setItem() method

This method is used to store data in localStorage. This method takes 2 parameters, a key and a value. You can give any name to your key as long as it does not exist in localStorage. If the key already exists, then it will update its value to the new value. This is how you store a theme using setItem() method.

Storing the theme using setItem()

Assume the theme toggle is a checkbox and is given an id attribute of ‘theme’. Once the checkbox is checked, an attribute of website-theme is set on the body element (makes the code readable) and the theme value is stored to localStorage.

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 getItem() method

As the name suggests, this method is used to get/retrieve the saved data from localStorage.This method only takes 1 parameter, the key. If the key is found in the localStorage, it’ll return the value of the key, else it will return null.

Retrieving the theme using getItem()

The stored theme is retrieved using the getItem() 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, localStorage is supported by all major browsers.