When building a website, you may want to provide the option for users to choose their preferred theme. One way to store this preference is by using session storage in JavaScript. Session storage allows you to store key-value pairs that are specific to a user’s session on a website.

How Session Storage Works

Session storage is similar to local storage, but with one key difference - the data stored in session storage is only available within the context of the current session. Once the user closes the browser tab or window, the session storage is cleared.

To store and retrieve data in session storage, you can use the sessionStorage object in JavaScript. This object provides methods to set, get, and remove data from session storage.

Here’s how you can use session storage to store user-specific theme preferences:

// Set the theme preference
function setThemePreference(theme) {
  sessionStorage.setItem('theme', theme);
}

// Get the theme preference
function getThemePreference() {
  const theme = sessionStorage.getItem('theme');
  return theme ? theme : 'light'; // Default to 'light' if no preference is set
}

// Remove the theme preference
function removeThemePreference() {
  sessionStorage.removeItem('theme');
}

In the above code, the setThemePreference() function is used to set the user’s theme preference in session storage. The getThemePreference() function retrieves the preference from session storage, and if no preference is set, it returns a default value of ‘light’. The removeThemePreference() function is provided to remove the theme preference from session storage if needed.

Implementing Theme Switching

To actually apply the stored theme preference to your website’s UI, you can use the retrieved preference to add a CSS class or modify relevant styles. You can do this when the page loads or when the user explicitly changes the theme preference.

Here’s a simple example of how you can apply the theme preference:

// Apply the theme preference
function applyThemePreference() {
  const theme = getThemePreference();

  if (theme === 'dark') {
    document.body.classList.add('dark-theme');
  } else {
    document.body.classList.remove('dark-theme');
  }
}

// Call the function to apply the theme on page load
applyThemePreference();

In this example, the applyThemePreference() function retrieves the theme preference using the getThemePreference() function we defined earlier. If the preference is ‘dark’, it adds a CSS class to the body element called ‘dark-theme’, which can be used to style the website accordingly.

Remember to update the example code based on your specific styles and requirements.

Conclusion

Using session storage in JavaScript allows you to store user-specific theme preferences that persist within the current session. This provides a convenient way for users to personalize their website experience. By implementing the code snippets provided and applying appropriate styling, you can create a seamless theme switching experience for your website visitors.

#webdevelopment #javascript