A cookie designed to store and retain the preferred CSS stylesheet choice

Question

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets:

function swapStylesheet(sheet){

    document.getElementById('pagestyle').setAttribute('href', sheet);

}

This function is called from buttons like so:

<a button class="Button" onclick="swapStylesheet('DayStyle.css')">Light</a>
        
<a button class="Button" onclick="swapStylesheet('NightStyle.css')">Dark</a>

However, I've noticed that the href reverts back to the default stylesheet upon refreshing the page. Is there a way to implement a cookie that remembers the preferred stylesheet? And can this cookie be applied site-wide?

javascript html css

Answer 1

Answer №1

If you want to save user preferences for styling on your website, one option is to utilize the localStorage feature in your browser. Cookies are typically used for server-side data reading, but cookies can still be used if desired.

Another alternative is sessionStorage, but keep in mind that the preferred theme will not persist once the tab or browser is closed as sessionStorage does not retain data after the session ends. This could defeat the purpose of remembering a user's preference.

Here's an approach using localStorage:

After the user selects a style, you can implement a function like this:

function swapStylesheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
    localStorage.setItem('stylesheet', sheet);
}

To apply the saved style when the page loads, you can use the

<body onLoad ="checkLS()">

function:

function checkLS () {
    let sheet = localStorage.getItem('stylesheet');
    if (sheet) {
        swapStylesheet(sheet);
    }
}

This method ensures that the user's preferred stylesheet/theme is automatically applied even if the browser was closed between visits.

Answer 2

If you want to save user preferences for styling on your website, one option is to utilize the localStorage feature in your browser. Cookies are typically used for server-side data reading, but cookies can still be used if desired.

Another alternative is sessionStorage, but keep in mind that the preferred theme will not persist once the tab or browser is closed as sessionStorage does not retain data after the session ends. This could defeat the purpose of remembering a user's preference.

Here's an approach using localStorage:

After the user selects a style, you can implement a function like this:

function swapStylesheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
    localStorage.setItem('stylesheet', sheet);
}

To apply the saved style when the page loads, you can use the

<body onLoad ="checkLS()">

function:

function checkLS () {
    let sheet = localStorage.getItem('stylesheet');
    if (sheet) {
        swapStylesheet(sheet);
    }
}

This method ensures that the user's preferred stylesheet/theme is automatically applied even if the browser was closed between visits.

A cookie designed to store and retain the preferred CSS stylesheet choice

Answer №1

Similar questions

Attempting to reach <p> from numerous web pages

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

Leveraging ES6 Generators for Efficient XMLHttpRequests

Discovering the magic of activating a JavaScript function on jQuery hover

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

Tips on incorporating the authorization header in the $.post() method with Javascript

Attempting to bring in HTML through a helper, but Rails doesn't seem too thrilled about it

Using a JavaScript script in my HTML alongside Vue.js is not possible

Issue with Node.js Stream - Repeated attempts to call stream functions on the same file are not being successful

What is the optimal strategy for managing multilingual text in a React website?

What is the best method for verifying that audio has not been loaded correctly?

AWS Lambda, where the billing time exceeds the actual processing time

Do all descendants consistently trigger rerenders?

Press on the button that is currently in your field of view

Acquiring the item by referencing one of its property's values

Bug on a Safari browser when using a dotted border on a table

The dropdown within the modal is proving elusive for Selenium to locate

Tips on adjusting the SVG view box for optimal visibility in a web browser

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

reversed json using javascript