Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

Question

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout

For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below:

<script>
$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout'); 
});
</script>

My dilemma lies in incorporating Cookies.set('name', 'value'); from the aforementioned link to set the cookie while toggling classes using .toggleClass and also how to retrieve the cookie data to apply it back as the body class.

Any assistance on this matter would be greatly appreciated!

javascript jquery css cookies document-body

Answer 1

Answer №1

If you're looking to persist the state of your toggled class across sessions, using Cookies is one option but localStorage might be a more suitable choice.

Let me show you how to achieve this with both methods.

Using Cookies

To understand the difference between utilizing Cookies and Local Storage, take a look at this thread. Either method should work in your case, although Local Storage has an advantage as it doesn't require an extra library.

let toggleState = Cookies.get('toggle');
$(body).toggleClass('.blackout', toggleState)

Using Local Storage

let toggleState = localStorage.getItem('toggle');
$(body).toggleClass('.blackout', toggleState)

With the updated code snippet

var localStorageToggle = localStorage.getItem('toggle');
var toggleState = localStorageToggle ? localStorageToggle : false;

$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout', toggleState);
  localStorage.setItem('toggle', toggleState);
});

Answer 2

If you're looking to persist the state of your toggled class across sessions, using Cookies is one option but localStorage might be a more suitable choice.

Let me show you how to achieve this with both methods.

Using Cookies

To understand the difference between utilizing Cookies and Local Storage, take a look at this thread. Either method should work in your case, although Local Storage has an advantage as it doesn't require an extra library.

let toggleState = Cookies.get('toggle');
$(body).toggleClass('.blackout', toggleState)

Using Local Storage

let toggleState = localStorage.getItem('toggle');
$(body).toggleClass('.blackout', toggleState)

With the updated code snippet

var localStorageToggle = localStorage.getItem('toggle');
var toggleState = localStorageToggle ? localStorageToggle : false;

$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout', toggleState);
  localStorage.setItem('toggle', toggleState);
});

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

Answer №1

Similar questions

Display notification following successful data saving in CodeIgniter

Learn how to implement a jQuery plugin within an AJAX request

Tips for successfully importing .eot and .woff documents using Babel?

Node.js dynamically updates exports for efficient code execution

Unable to include Authenticated Routes in react router dom

JavaScript - The AJAX response is consistently after being undefined

Ensure that the width of the sibling div matches the width of its sibling image

Releasing the mouse button after dragging successfully without the use of any libraries

How can jQuery be forced to accept an XHTML string as XML?

Manipulating the DOM by nesting an icon within a button element in HTML

The browser is failing to send cookies to the backend and is also not properly setting them initially

The main.js file will be served by nodeJS using express

Creating an interactive time selection tool with two dropdown lists that are dependent on each other using HTML and JavaScript

How is the server architecture typically designed in a node.js application?

Next.js manages 0Auth authentication using MoneyButton for authorization

Determine whether the user has authorized the website with long-term access to obtain location information in the browser

What are the steps to integrate TypeScript into JavaScript code?

NPM is currently malfunctioning and displaying the following error message: npm ERR! 404

The radial gradient in d3.js does not properly affect paths

Is it possible to verify if the provided form input variable exists within an array? Can anyone point out any oversights?