How to Save the values of check boxes to session storage and retrieve them on the next page

user_15570769 0
Viewed 560

I would like to save the data of the first check boxes to session Storage and I would like to retrieve the data and set them to the second page on load from the session storage.

1st HTML

<body>
  <label for="1">
<input type="checkbox" name="num" id="1" checked="checked" value="1" >1
</label>
  <label for="2">
<input type="checkbox" name="num" id="2" value="2" >2
</label>
  <label for="3">
<input type="checkbox" name="num" id="3" value="3" >3
</label>
  <label for="4">
<input type="checkbox" name="num" id="4" value="4" >4
</label>
  <button onclick="saveSession()">save</button>
  <script type="text/javascript">
    function saveSession() {
      // I want to save the value of the radio button to sessionStorage here
    }
  </script>
</body>

In my second HTML I would like to retrieve this data and set the value of the radio buttons to the same.

2nd HTML

<body onload="type()">
  <label for="1">
<input type="checkbox" name="num" id="1" checked="checked" value="1" >1
</label>
  <label for="2">
<input type="checkbox" name="num" id="2" value="2" >2
</label>
  <label for="3">
<input type="checkbox" name="num" id="3" value="3" >3
</label>
  <label for="4">
<input type="checkbox" name="num" id="4" value="4" >4
</label>
  <script type="text/javascript">
    function type() {
      //I want to get the data with sessionStorage.getItem()
    }
  </script>
</body>

Thanks in advance.

html jquery javascript
1 Answers

Let's do this step by step.

To get a value from a checkbox you can do the following:

const value = document.querySelector('input[type="checkbox"]:checked').value

To save it on the storage you do the following:

localStorage.setItem('num-value', value)

Wrapping it up for the 1st page:

function saveSession() {
  const value = document.querySelector('input[type="checkbox"]:checked').value
  localStorage.setItem('num-value', value)
}

And then in the 2nd page, we get it from the storage

function type() {
  const value = localStorage.getItem('num-value')
  console.log('value', value) // console it
}

*Edit:

If you want for multiple values you have to do the following

const elements = Array.from(document.querySelectorAll('input[type="checkbox"]'))

const checkValues = elements.map(input => input.checked)

And then as it's an array of values, you must save it as a JSON string

localStorage.setItem('num-value', JSON.stringify(checkValues))

Now, in the 2nd page, in order to get them values you must to the same transformation, but now from JSON to string.

const checkValues = JSON.parse(localStorage.getItem('num-value'))

And then, finally you update the 2nd page checkboxes with the correct values:

document
  .querySelectorAll('input[type="checkbox"]')
  .forEach((input, index) => input.checked = checkValues[index]) // you get the value based on the index

Note that I'm using some functions from document.
I recommend you take a deeper look into document.querySelector and document.querySelectorAll

user_127018480
Related