如何使用 localStorage 获取选定选择的值

Question

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

这是我的选择：

            <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-value 属性中的data 解决了这个问题。之后，我尝试刷新页面并删除了 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; 
}