Selected option (HTML dropdown list) isn't saved to the localStorage-CodePudding

I'm trying to save the "selected" option from the <select> HTML tag to the localStorage, so when I refresh the page the last selected option is selected. I can see that it's saved in the console.log, but it's not working on the page load. How can I make it work?

<select >
    <option value="0.5">0.5x</option>
    <option value="1" selected>1x</option>
    <option value="1.5">1.5x</option>
    <option value="2">2x</option>
    <option value="2.5">2.5x</option>
    <option value="3">3x</option>
    <option value="4">4x</option>
    <option value="5">5x</option>
    <option value="6">6x</option>
    <option value="8">8x</option>
    <option value="10">10x</option>
</select>
<p  data-val="<?php echo $portion; ?>"></p> <!-- PHP Generated value, let's just say it's "1" -->

<script>
  $(function() {
    $(".multiply_ing").on("change", function() {

      $('.multiply_ing option').each(function() {
        let multi_opt = $(this).val();
        let portion = parseFloat(document.querySelector(".portion").dataset.val);
        let portions = multi_opt * portion;
      });

      let portion =  document.querySelector(".portion").dataset.val;
      document.querySelector(".portion").innerHTML = portion * multiply_val;
                    
      localStorage.value = this.value;
      console.log(localStorage.value);
                    
    }).change();

    window.onload = function(){ 
      document.querySelector(".multiply_ing").options[localStorage.value].selected = true;
    }
                
  });

</script>

Note: there is more code than in this example, but it's irrelevant to the problem.

CodePudding user response：

To do what you require you can just use val() to both get and set the value of the select when required:

jQuery($ => {
  let $select = $('.multiply_ing');

  // get on load
  $select.val(localStorage.getItem('value') || 1); // 1 = default value

  $select.on('change', e => {
    localStorage.setItem('value', e.target.value);
  });
});

Also note that the each() in your example is doing nothing and can be removed. In addition, multiply_val is not defined anywhere.

As a general rule, if you're going to incur the performance penalty of loading jQuery in to the DOM, then you're better off making use of it everywhere. Mixing JS and jQuery just leads to confusion.

CodePudding user response：

To store value in localStorage you have to use key value pair like this localStorage.setItem('selectedValue',yourValue) and to get value use key to access the saved value localStorage.getItem('selectedValue')

$(function() {
     $('.multiply_ing').change(function() {
        localStorage.setItem('selectedValue', this.value);
    });
    if(localStorage.getItem('todoData')){
        $('.multiply_ing').val(localStorage.getItem('selectedValue'));
    }
                
  });

for working code you can see this demo