Don't forget about managing cookies in JavaScript!

Question

Don't forget about managing cookies in JavaScript!

Currently, I am developing a left sidebar menu that expands and collapses upon clicking a button.

I need to find a way to save the state of the menu, whether it is expanded or collapsed, so that when the page is refreshed, the same class will still be applied.

$('#menu-action').click(function() {
  $('.sidebar').toggleClass('active');
  $('.main').toggleClass('active');
  $(this).toggleClass('active');

  if ($('.sidebar').hasClass('active')) {
    $(this).find('i').addClass('fa-close');
    $(this).find('i').removeClass('fa-bars');
  } else {
    $(this).find('i').addClass('fa-bars');
    $(this).find('i').removeClass('fa-close');
  }
});

// Provide hover effect for the menu
$('#menu-action').hover(function() {
  $('.sidebar').toggleClass('hovered');
});

javascript jquery css cookies

Answer 1

Answer №1

Consider utilizing Window.localStorage:

$(document).ready(function() {
    if(localStorage.getItem("active")) {
        $('.sidebar').addClass("active")
    }
});

$(window).on('beforeunload', function() {
    localStorage.setItem("active", $('.sidebar').hasClass("active"));
});

Note that not all browsers support local storage. Check the provided link for more information. For older browser compatibility, you can opt for solutions like store.js.

Alternatively, you can explore using a cookie plugin as recommended here.

Answer 2

Consider utilizing Window.localStorage:

$(document).ready(function() {
    if(localStorage.getItem("active")) {
        $('.sidebar').addClass("active")
    }
});

$(window).on('beforeunload', function() {
    localStorage.setItem("active", $('.sidebar').hasClass("active"));
});

Note that not all browsers support local storage. Check the provided link for more information. For older browser compatibility, you can opt for solutions like store.js.

Alternatively, you can explore using a cookie plugin as recommended here.

Answer 3

Answer №2

If you are unsure about the best way to handle reading or writing cookies, consider using the js-cookie library for a more streamlined approach. While it is possible to manage cookies with plain JavaScript, it can be quite cumbersome.

An example of how you could implement this library is shown below (Assuming you have included js.cookie.js in your HTML file):

// Save references to frequently used elements
var $menuAction = $('#menu-action');
var $menuActionI = $menuAction.find('i'); // the <i> inside #menu-action
var $sidebar = $('.sidebar');
var activeClass = 'active';

// Reference: https://github.com/js-cookie/js-cookie/tree/v2.1.0#basic-usage
var isActive = Cookies.get('site-menu-active') || false;

function toggleMenu() {
    $sidebar.toggleClass('active', isActive);
    $('.main').toggleClass('active', isActive);
    $menuAction.toggleClass('active', isActive);
    $menuActionI.toggleClass('fa-close', isActive);
    $menuActionI.toggleClass('fa-bars', isActive);

    isActive = !isActive;
    Cookies.set('site-menu-active', isActive, { expires: 7 });
 }

// Call immediately to set initial state based on cookie value
toggleMenu();

// Add click functionality
$menuAction.click(toggleMenu);

// Add hover effect to menu
$menuAction.hover(function() {
    $sidebar.toggleClass('hovered');
});

Answer 4

If you are unsure about the best way to handle reading or writing cookies, consider using the js-cookie library for a more streamlined approach. While it is possible to manage cookies with plain JavaScript, it can be quite cumbersome.

An example of how you could implement this library is shown below (Assuming you have included js.cookie.js in your HTML file):

// Save references to frequently used elements
var $menuAction = $('#menu-action');
var $menuActionI = $menuAction.find('i'); // the <i> inside #menu-action
var $sidebar = $('.sidebar');
var activeClass = 'active';

// Reference: https://github.com/js-cookie/js-cookie/tree/v2.1.0#basic-usage
var isActive = Cookies.get('site-menu-active') || false;

function toggleMenu() {
    $sidebar.toggleClass('active', isActive);
    $('.main').toggleClass('active', isActive);
    $menuAction.toggleClass('active', isActive);
    $menuActionI.toggleClass('fa-close', isActive);
    $menuActionI.toggleClass('fa-bars', isActive);

    isActive = !isActive;
    Cookies.set('site-menu-active', isActive, { expires: 7 });
 }

// Call immediately to set initial state based on cookie value
toggleMenu();

// Add click functionality
$menuAction.click(toggleMenu);

// Add hover effect to menu
$menuAction.hover(function() {
    $sidebar.toggleClass('hovered');
});

Answer 5

Answer №3

When it comes to managing data in web applications, Html5 storage proves to be a valuable tool. It offers the flexibility of switching between localStorage and sessionStorage based on specific needs:
1)localStorage - data persists even after closing the browser
2)sessionStorage - data is cleared upon closing the browser
Stored data can also be easily removed as needed

$('#menu-action').click(function() {
  $('.sidebar').toggleClass('active');
  $('.main').toggleClass('active');
  $(this).toggleClass('active');

  localStorage.setItem("active", $('.sidebar').hasClass('active'));

  if ($('.sidebar').hasClass('active')) {
    $(this).find('i').addClass('fa-close');
    $(this).find('i').removeClass('fa-bars');
  } else {
    $(this).find('i').addClass('fa-bars');
    $(this).find('i').removeClass('fa-close');
  }
});

$(document).ready(function(){
  if(localStorage.getItem("active")){
      $('.sidebar').addClass('active');
      $('.main').addClass('active');
      $('#menu-action').find('i').addClass('fa-close');
      $('#menu-action').find('i').removeClass('fa-bars');
  }
});

Answer 6

When it comes to managing data in web applications, Html5 storage proves to be a valuable tool. It offers the flexibility of switching between localStorage and sessionStorage based on specific needs:
1)localStorage - data persists even after closing the browser
2)sessionStorage - data is cleared upon closing the browser
Stored data can also be easily removed as needed

$('#menu-action').click(function() {
  $('.sidebar').toggleClass('active');
  $('.main').toggleClass('active');
  $(this).toggleClass('active');

  localStorage.setItem("active", $('.sidebar').hasClass('active'));

  if ($('.sidebar').hasClass('active')) {
    $(this).find('i').addClass('fa-close');
    $(this).find('i').removeClass('fa-bars');
  } else {
    $(this).find('i').addClass('fa-bars');
    $(this).find('i').removeClass('fa-close');
  }
});

$(document).ready(function(){
  if(localStorage.getItem("active")){
      $('.sidebar').addClass('active');
      $('.main').addClass('active');
      $('#menu-action').find('i').addClass('fa-close');
      $('#menu-action').find('i').removeClass('fa-bars');
  }
});

Don't forget about managing cookies in JavaScript!

Answer №1

Answer №2

Answer №3

Similar questions

Using JQuery's appendTo method with a lengthy string of elements that includes a mix of single and double quotes: a step-by-step guide

How to maintain the selected value in a Vue.js dropdown even after the page is refreshed

Offspring maintain a certain position within the larger framework of their parent on a

Encase the event handler within JQuery

A helpful guide on incorporating and showcasing a 'svg' file within a React Native application

Turn off Grammarly on a WordPress Site

Troubleshooting: jQuery AJAX failing to receive JSON data in HTTP request

Populate the named dynamic array with information

Following the submission of a POST request, an error occurred stating: "Unable to assign headers once they have been sent to

Is there a way to show the input value in a different form while still retaining the original value?

The functioning of JavaScript's ajax capabilities

Guide to sending a response to an AJAX post request in Express with Node.js: Answered

The positioning of drawings on canvas is not centered

Keeping the Drawer open in Material-UI: What you need to know!

Issue with Pebble SDK/SimplyJS failing to recognize the tab character

What are the possible reasons for my load function failing intermittently?

Arranging by and loading progressively in AngularJS

Having issues with C# ASP.Net autocomplete not functioning properly when using Javascript/Json post

When the input CTRL+C is entered in the console, Node.js / JavaScript will output

"Enhance your website with the ability to dynamically load and display