localStorage - Выпадающее меню

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня проблема в том, что локальное хранилище сохраняет первый вариант выпадающего меню, но не второй и третий. Что следует отредактировать или добавить в HTML и JS для нескольких.

 var init = function (){
  //an ugly warning to users without localStorage support
  if(!window.localStorage){
    $('body').prepend('Sorry, you browser does not support local storage');
    return false;
  }
  var sel = $('select'),
      but = $('button');
  
  var clearSelected = function(){
      sel.find(':selected').prop('selected', false);
  }
  
  if(localStorage.getItem('pref')){
    var pref = localStorage.getItem('pref');
    clearSelected();
    //set the selected state to true on the option localStorage remembers
    sel.find('#'   pref).prop('selected', true);
  }

  var setPreference = function(){
    //remember the ID of the option the user selected
    localStorage.setItem('pref', sel.find(':selected').attr('id'));
  };
  
  var reset = function(){
    clearSelected();
    localStorage.setItem('pref', undefined);
  }
  
  sel.on('change', setPreference);
  but.on('click', reset);
};
$(document).ready(init);

     <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="2.js"></script>
    </head>
<select>
  <option selected></option>
  <option id="opt1">1</option>
  <option id="opt2">2</option>
  <option id="opt3">3</option>
  <option id="opt4">4</option>
</select>
<br></br>
<select>
  <option selected></option>
  <option id="opt5">5</option>
  <option id="opt6">6</option>
  <option id="opt7">7</option>
  <option id="opt8">8</option>
</select>

1. вместо этого сохраните выделенный массив в виде строки. localStorage.items = JSON.stringify([...JSON.parse(localStorage.items), newItem])

2. @TheFool Не могли бы вы быть добры и, пожалуйста, предоставить отредактированный пример.

Ответ №1:

var sel = $('select'), выбирает оба выпадающих списка.

добавьте идентификаторы в выпадающие списки

 <select id="first">

измените setPreference на это

 var setPreference = function () {
  //remember the ID of the option the user selected
  localStorage.setItem('pref', this.value);
};

и соответствующим образом настройте логику извлечения localstorage.

Ответ №2:

Я внес изменения, однако теперь они оба не сохраняются. Я прошу прощения за свой уровень знаний, но это мой первый раз, и это просто нужно для работы.

 var init = function (){
  //an ugly warning to users without localStorage support
  if(!window.localStorage){
    $('body').prepend('Sorry, you browser does not support local storage');
    return false;
  }
  var sel = $('select'),
      but = $('button');
  
  var clearSelected = function(){
      sel.find(':selected').prop('selected', false);
  }
  
  if(localStorage.getItem('pref')){
    var pref = localStorage.getItem('pref');
    clearSelected();
    //set the selected state to true on the option localStorage remembers
    sel.find('#'   pref).prop('selected', true);
  }

  var setPreference = function () {
  //remember the ID of the option the user selected
  localStorage.setItem('pref', this.value);
};
  
  var reset = function(){
    clearSelected();
    localStorage.setItem('pref', undefined);
  }
  
  sel.on('change', setPreference);
  but.on('click', reset);
};
$(document).ready(init);

     <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="2.js"></script>
    </head>
<select id="first">
  <option id="opt1">1</option>
  <option id="opt2">2</option>
  <option id="opt3">3</option>
  <option id="opt4">4</option>
</select>
<br></br>
<select id="second">
  <option id="opt5">5</option>
  <option id="opt6">6</option>
  <option id="opt7">7</option>
  <option id="opt8">8</option>
</select>
<br></br>