Question

我正在尝试使用localStorage.getItem()获取所选select的值，但它会给我一个错误。

这是我的选择：

            <div class="field">
                <label>Work Area</label>
              <select class="ui fluid dropdown work_area" id="work_area" name="work_area">
                  <option selected value="">Select Work Area.</option>
                  <?php selectWorkArea(); ?>
              </select>

            </div>

这是我的PHP函数

 function selectWorkArea(){
    $conn = New Connection;
    $sql = "SELECT DISTINCT work_area FROM machine ORDER BY work_area ASC";
    $qry = $conn->select($sql,NULL,'0129180857');
    while($row= $qry->fetch(PDO::FETCH_OBJ)){
        $work_area = $row->work_area;
        echo "<option data-value='$work_area' >$work_area</option>";
    }

 }

这是我的Javascript

 var select = document.querySelector(".work_area");
      var selectOption = select.options[select.selectedIndex];
      var lastSelected = localStorage.getItem('select');
      if(lastSelected) {
          select.value = lastSelected; 
      }
      select.onchange = function () {
        lastSelected = select.options[select.selectedIndex].value;
        console.log(lastSelected);
        localStorage.setItem('workarea', lastSelected);

     }

我收到了这个错误：   Error image click here

但是当我试图将我的选择改为此时它完全正常

        <div class="field">
                <label>Work Area</label>
                <select class="ui fluid dropdown work_area" id="work_area" name="work_area">
                  <option selected value="">Select Work Area.</option>
                  <option  data-value="1">1</option>
                  <option data-value="2">2</option>
                </select>
        </div>

click here to see the image

Answer 1

我通过移除data属性中的data-value解决了这个问题。之后，我尝试刷新页面并删除了select的值。这是不好的。解决方案是修改javascript，这里是修改：

Javascript代码：

      $('#work_area').val(localStorage.workarea);
      localStorage.setItem('workarea','');
      var select = document.querySelector(".work_area");
      var selectOption = select.options[select.selectedIndex];
      var lastSelected = localStorage.getItem('select');
      if(lastSelected) {
          select.value = lastSelected; 
      }
      select.onchange = function () {
        lastSelected = select.options[select.selectedIndex].value;
        localStorage.setItem('workarea', lastSelected);

      }

html代码：

         <div class="field">
            <label>Work Area</label>
            <select class="ui fluid dropdown work_area" id="work_area" name="work_area">
              <option selected value="">Select Work Area.</option>
               <?php selectWorkArea(); ?>
             </select>
         </div>

PHP功能代码：

 function selectWorkArea(){
    $conn = New Connection;
    $sql = "SELECT DISTINCT work_area FROM machine ORDER BY work_area ASC";
    $qry = $conn->select($sql,NULL,'0129180857');
    while($row= $qry->fetch(PDO::FETCH_OBJ)){
        $work_area = $row->work_area;
        echo "<option value='$work_area' >$work_area</option>";
    }

}

Answer 2

使用前检查是否为空。

if (localStorage.getItem("select") === null) {
  var lastSelected = localStorage.getItem('select');
  select.value = lastSelected; 
}

如何使用localStorage获取所选select的值

2 个答案: