Save a CSS class within the browser

Question

Save a CSS class within the browser

One feature of my project is the ability to change the site theme with a simple click:

<ul>
  <li class="=contact"><a href="#">Contact</a></li>
  <li class="facebook"><a href="#">Facebook</a></li>
  <li class="twitter"><a href="#">Twitter</a></li>
  <li class="rss"><a href="#">Feed Rss</a></li>
  <li class="change-theme"><a href="#">Change Theme</a></li>
</ul>

Clicking on the link within the <li class="change-theme"> triggers the following script:

$('.change-theme').click(function () {
  $('body').toggleClass('theme-dark');
});

This adds the class theme-dark, thereby changing the site theme. However, upon page refresh, the default theme reverts back. Is there a way to save the chosen theme and maintain it even after browser updates?

javascript jquery html css

Answer 1

Answer №1

Utilizing local storage allows for data to be stored indefinitely without an expiration date:

$('.change-theme').click(function () {
    $('body').toggleClass('theme-dark');
    if($('body').hasClass('theme-dark')){
        localStorage.setItem('theme', 'theme-dark');
    }
});

$(document).ready(function(){
    var theme = localStorage.getItem('theme');  
    if(theme !== ''){      
        $('body').addClass(theme);
    }
});

On the other hand, sessionStorage stores data only for a single session until the browser is closed (usage is similar to localStorage).

This feature is supported by all major browsers, with Internet Explorer implementing it since version 8.

Note: Only strings can be stored in web storage.

If you prefer using cookies instead, you can do so by:

document.cookie="theme=theme-dark"; //setter

and

var x = document.cookie; //getter

Reference

webStorage

cookies

Answer 2

Utilizing local storage allows for data to be stored indefinitely without an expiration date:

$('.change-theme').click(function () {
    $('body').toggleClass('theme-dark');
    if($('body').hasClass('theme-dark')){
        localStorage.setItem('theme', 'theme-dark');
    }
});

$(document).ready(function(){
    var theme = localStorage.getItem('theme');  
    if(theme !== ''){      
        $('body').addClass(theme);
    }
});

On the other hand, sessionStorage stores data only for a single session until the browser is closed (usage is similar to localStorage).

This feature is supported by all major browsers, with Internet Explorer implementing it since version 8.

Note: Only strings can be stored in web storage.

If you prefer using cookies instead, you can do so by:

document.cookie="theme=theme-dark"; //setter

and

var x = document.cookie; //getter

Reference

webStorage

cookies

Save a CSS class within the browser

Answer №1

Similar questions

What is the best way to prompt a jQuery plugin to update the information it has retrieved?

Filtering and pagination on the server side using AngularJS

Applying a CSS class to a newly generated row with JavaScript

The random sorting algorithm in the query_posts function is disrupting the formatting of the CSS

Attempting to save data to a .txt file using PHP and making an AJAX POST request

Developing a Restful Put Request using JQuery

Strategies for redirecting a PDF download response from an API (using node/express) to a user interface (built with React)

Changing JSON DateTime into a readable format with the day, month, year, hour, minute, and am/pm

How to convert serialized jQuery form data into a multi-dimensional array?

Using Ajax to send a variable to PHP and then selecting data from an SQL database

Using AngularJS: Trigger a directive method as a callback directly from the controller

Toggle the mute and unmute feature for a participant in an AWS Chime meeting

Tips for dynamically populating a dropdown menu in Laravel with Ajax and JQuery

The size of my React Native app is significantly larger than expected once installed

Creating messages from an array using vanilla JavaScript or jQuery

Issues with forms displaying as raw text within Laravel 5

Strategies for Effectively Managing Null Checks in Your JavaScript Project

Discovering the size and count of JavaScript objects within a browser's memory

What is the process for upgrading TypeScript to the latest version?

Can you explain the mechanism behind how the spread syntax (...) interacts with mapGetters?