Enhance User Experience by Saving Your Website’s Theme Using Local Storage.
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
.
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.
Putting it all together
Lastly, localStorage
is supported by all major browsers.
Deep dive into localStorage
The below links are some great resources to learn more about localStorage