javascript - 返回设置页面时如何保持所选选项的显示？

Question

我有一个设置页面，其中包含性别下拉菜单:男，女。当我点击“保存设置”时，我使用本地存储来保存所选选项，但下次我进入该页面时，无论如何它都会显示男性，因为它是第一个选项。我希望它显示保存的设置。

这就是我保存它的方式。不知道如何将其带回来检查设置页面加载

<div class="form-group">
   <label for="sel1">Gender:</label>
   <select class="form-control" id="gender">
      <option>Male</option>
      <option>Female</option>
   </select>
</div>

  (function (global) {
 document.getElementById("save").addEventListener("click", function () {
 global.localStorage.setItem("mySharedData", document.getElementById("gender").value);
 }, false);
}(window));

Answer 1

您正在保存数据，而不是再次检索它

<div class="form-group">
   <label for="sel1">Gender:</label>
   <select class="form-control" id="gender">
      <option>Male</option>
      <option>Female</option>
   </select>
</div>

(function (global) {
    var data = global.localStorage.getItem("mySharedData"),
        sel = document.getElementById("gender"),
        opts = sel.options;

    if (data !== null) {
        for(var opt, j = 0; opt = opts[j]; j++) {
            if(opt.value == data) {
                sel.selectedIndex = j;
                break;
            }
        }
    }

    document.getElementById("save").addEventListener("click", function () {
        var val = document.getElementById("gender").value;
        global.localStorage.setItem("mySharedData", val);
    }, false);
}(window));