时间戳

首页 > 解决方案 > LocalStorage - 下拉菜单

javascript - LocalStorage - 下拉菜单

问题描述

我有问题，本地存储保存第一个下拉菜单选项，但不是第二个和第三个。应该在 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>

标签： javascripthtmljquery

解决方案

我进行了更改，但是现在它们都没有保存。我为我的知识水平道歉，但这是我的第一次，只是需要它来工作。

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>

推荐阅读