What is the efficient way to toggle localStorage based on checkbox selection using jquery?

Question

What is the efficient way to toggle localStorage based on checkbox selection using jquery?

I am looking to efficiently manage localStorage using checkboxes. When a checkbox is checked, I want to add the corresponding value to localStorage, and remove it when unchecked.

var selectedModes = new Array();
$('.play_mode').on('click', function() {
  var modeValue = $(this).val();
  if ($(this).is(':checked')) {
    selectedModes.push(modeValue);
    localStorage.setItem('selectedMode', modeValue); //set localstorage

  } else {
    selectedModes.pop();
    localStorage.removeItem('selectedMode', modeValue); //remove localstorage
  }
  console.log('Selected modes: ' + selectedModes + '\n Stored mode: ' + localStorage.getItem('selectedMode'));
})

<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

However, the current code only stores one value in the localStorage even with multiple checkboxes checked. I aim for it to maintain an array of values like selectedModes.

Refer to this functional fiddle: https://jsfiddle.net/grus6t25/

javascript html jquery

Answer 1

Answer №1

When a checkbox is clicked, retrieve the item from local storage and determine if it is an array. If the checkbox is checked and the value is not already in the array, add it. If it is unchecked and present in the array, remove it. Finally, update the entire array in local storage.

$('.play_mode').on('change', function(event) {  
  const $checkbox = $(event.target);
  const value = $checkbox.val();
  
  try {
    let pmode = JSON.parse(localStorage.getItem('plmode'));
    
    if (!Array.isArray(pmode)) {
      pmode = [];
    }
    
    if ($checkbox.is(':checked')) {
      if (!pmode.includes(value)) {
        pmode.push(value);
      }
    } else {
      const index = pmode.indexOf(value);

      if (index > -1) {
        pmode.splice(index, 1);
      }
    }
    
    localStorage.setItem('plmode', JSON.stringify(pmode));
  } catch (error) {
    console.log(error);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 2

When a checkbox is clicked, retrieve the item from local storage and determine if it is an array. If the checkbox is checked and the value is not already in the array, add it. If it is unchecked and present in the array, remove it. Finally, update the entire array in local storage.

$('.play_mode').on('change', function(event) {  
  const $checkbox = $(event.target);
  const value = $checkbox.val();
  
  try {
    let pmode = JSON.parse(localStorage.getItem('plmode'));
    
    if (!Array.isArray(pmode)) {
      pmode = [];
    }
    
    if ($checkbox.is(':checked')) {
      if (!pmode.includes(value)) {
        pmode.push(value);
      }
    } else {
      const index = pmode.indexOf(value);

      if (index > -1) {
        pmode.splice(index, 1);
      }
    }
    
    localStorage.setItem('plmode', JSON.stringify(pmode));
  } catch (error) {
    console.log(error);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 3

Answer №2

To efficiently store all checkbox values, consider utilizing an array or object within the localStorage feature. Here is a practical example using an array:

const localStorage = {
  // Simulated local storage for demonstration
  setItem: (name, value) => console.log(`You have assigned ${name} with ${value}`)
};

$('.play_mode').on('click', function() {
  const plmode = $.map($(".play_mode"), (item) => {
    return {id: item.value, checked: item.checked};
  });
  localStorage.setItem('plmode', JSON.stringify(plmode));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 4

To efficiently store all checkbox values, consider utilizing an array or object within the localStorage feature. Here is a practical example using an array:

const localStorage = {
  // Simulated local storage for demonstration
  setItem: (name, value) => console.log(`You have assigned ${name} with ${value}`)
};

$('.play_mode').on('click', function() {
  const plmode = $.map($(".play_mode"), (item) => {
    return {id: item.value, checked: item.checked};
  });
  localStorage.setItem('plmode', JSON.stringify(plmode));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 5

Answer №3

It is important to note that when removing values from local storage, all values are being removed and not just the current checkbox.

Whether you are checking or unchecking a checkbox, it is necessary to update the entire array in the localStorage().

When unchecking a checkbox, avoid popping from the array as it will remove the last value and not the value of the current checkbox. Instead, locate the current value in the array and remove it accordingly.

var pmode = new Array();
$('.play_mode').on('click', function() {
  var pval = $(this).val();
  if ($(this).is(':checked')) {
    pmode.push(pval);
  } else {
    var index = pmode.indexOf(pval);
    if (index != -1) {
      pmode.splice(index, 1);
    }
  }
  localStorage.setItem('plmode', JSON.stringify(pval));
  console.log('pmode:' + pmode + '\n plmode:' + localStorage.getItem('plmode'));
})

<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 6

It is important to note that when removing values from local storage, all values are being removed and not just the current checkbox.

Whether you are checking or unchecking a checkbox, it is necessary to update the entire array in the localStorage().

When unchecking a checkbox, avoid popping from the array as it will remove the last value and not the value of the current checkbox. Instead, locate the current value in the array and remove it accordingly.

var pmode = new Array();
$('.play_mode').on('click', function() {
  var pval = $(this).val();
  if ($(this).is(':checked')) {
    pmode.push(pval);
  } else {
    var index = pmode.indexOf(pval);
    if (index != -1) {
      pmode.splice(index, 1);
    }
  }
  localStorage.setItem('plmode', JSON.stringify(pval));
  console.log('pmode:' + pmode + '\n plmode:' + localStorage.getItem('plmode'));
})

<label><input type="checkbox" class="play_mode" value="101" />101</label>
<label><input type="checkbox" class="play_mode" value="102" />102</label>
<label><input type="checkbox" class="play_mode" value="103" />103</label>
<label><input type="checkbox" class="play_mode" value="104" />104</label>
<label><input type="checkbox" class="play_mode" value="105" />105</label>

What is the efficient way to toggle localStorage based on checkbox selection using jquery?

Answer №1

Answer №2

Answer №3

Similar questions

I'm looking to make my PayPal donate button smaller after noticing that PayPal is making it larger. How can I adjust the size of my customized PayPal

The correct method to access this LINK

"Unable to Access Account: PHP Login Script Failing to Log Users In

Jasmine tests for AngularJS directive failed to invoke the link function

How to detect and resolve the problem of an empty div tag

The class "slick" in <col class="slick"> does not add any styling or effects

Encountering a "Raphael is undefined" error message when working with Treant.js

Looking to deactivate the entire keyboard with JavaScript? Make sure that the start key is not disabled, not even Ctrl

Difficulty in transmitting two boolean values using ajax and setTimeout()

Guide to Utilizing the Import Function in a Vue 3 Template

What is the best approach for manipulating live data in localStorage using ReactJS?

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

What are the best strategies for ensuring this website is fully optimized for all devices

What is the process for calculating the total sum of input values utilizing JavaScript?

What is the best way to use jQuery to dynamically highlight all instances of a word as the user types, both new and existing?

What is the best way to create a button that will trigger a modal window to display a message?

Even though I have successfully compiled on Heroku, I am still encountering the dreaded Application Error

Dealing with errors using Javascript and Node.js (then/catch)

Tips on keeping Bootstrap Modals out of your browsing history

Guide on troubleshooting Node TypeScript in Visual Studio Code when the JavaScript source is stored in a separate directory