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

What sets apart the <img> and <Image> layout attributes in NextJS?

Ensure that the browser is instructed to utilize a designated Accept field within the HTTP request

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

Having trouble with adding Jquery UI CSS to my project even after bundling

What is the best way to transform an array of objects in JavaScript?

Is It Possible to Align Text Horizontally within a Box?

Import a JavaScript file with beneficial test functions for selenium testing

Ways to hide the loading spinner on a web browser

Prevent the loading of a <img> element and replace it with a new one using CSS

Encountering Internal Server Error when C# WebMethod communicates with JavaScript AJAX call

processing an array using ajax form submission

What is the best way to use requests in python to enter text in a textarea, then scrape the html with bs4, all while the input remains hidden?

Steps to stop POST requests sent via AJAX (acquired through Firebug)

"Is it possible to draw on top of a canvas element that's already been

Incorporating stick-to-top scroll functionality using AngularJS and ng

Tips for accessing an Angular service from different Angular controllers

Tips for adjusting the height of a div element to completely occupy the unused portion of the viewport

Having trouble submitting the edit form

Images displayed alongside webpage contents

PHP Calculator - Displaying results in both the webpage and an Ajax popup for enhanced user experience