Question

我正在尝试使用checkboxes隐藏输入框，将checkbox名称保存在localStorage和.hide() input上，但是当我刷新页面，它不会保留隐藏的input字段，checkbox也不会uncheck。

有人可以指出我缺少的内容，我知道支票if()仍然不完整，我尝试在for()内执行if来获取localStorage价值并执行('#'+forVal).hide()或('#' + forVal).prop('checked', false)，但这根本不起作用。

inputs是动态的

searchParams = getObjects(apiPaths[i].get.parameters);
for (var x = 0; x < searchParams.length; x++) {
    var container = $('#checkBox');
    var inputs = container.find('input');
    var id = inputs.length + 1;
    var inputName = searchParams[x].name;
    $('<textarea />', { id: inputName, name: inputName, placeholder: inputName, rows: "2", class: "search-area-txt col-sm-12" }).appendTo(searchbox);
    var chkBoxElement = $('<input />', { type: 'checkbox', id: inputName, name: inputName }).appendTo(checkBox);
    chkBoxElement.click(function () {
          checkBoxSetting(this.id);
    });
    chkBoxElement.prop('checked', true); // initially all inputs are checked

    $('<label />', { 'for': 'x' + id, text: inputName, id: inputName, name: inputName }).appendTo(checkBox);
}

选中localStorage复选框

var inputNames = [];
if (localStorage.getItem('chked') !== null) {
    inputNames = JSON.parse(localStorage.getItem('chked'));
}

将其保存到localStorage

function checkBoxSetting(id) {
    var indexOfItem = inputNames.indexOf(id)
    if (indexOfItem >= 0) {
        inputNames.splice(indexOfItem, 1);
    } else {
        inputNames.push(id);
    }
    localStorage.setItem('chked', JSON.stringify(inputNames));
    $("#" + inputNames).hide();
}

示例html，保存到localStorage

Plunker

Html文本字段

<textarea id="id" name="id" placeholder="id" rows="2" class="search-area-txt col-sm-12"></textarea>
<textarea id="sku" name="sku" placeholder="sku" rows="2" class="search-area-txt col-sm-12"></textarea>
<textarea id="code" name="code" placeholder="code" rows="2" class="search-area-txt col-sm-12"></textarea>

复选框

<div id="checkBox">
 <input type="checkbox" id="id" name="id">
 <label for="id" id="id" name="id">id</label>
 <input type="checkbox" id="sku" name="sku">
 <label for="sku" id="sku" name="sku">sku</label>
 <input type="checkbox" id="code" name="code"><label for="code" id="code" name="code">code</label>
</div>

Answer 1

这是解决方案的开始。这将处理本地存储，并在您重新加载页面时检查复选框。

$(document).ready(function() {
  var inputNames = []

  if (localStorage.getItem('chked') !== null) {
    inputNames = JSON.parse(localStorage.getItem('chked'));
    $("#" + inputNames[0]).attr("checked", true)
    $('#name').hide()
  }


  function checkBoxSetting(name) {
    var indexOfItem = inputNames.indexOf(name)
    if (indexOfItem >= 0) {
      inputNames.splice(indexOfItem, 1);
    } else {
      inputNames.push(name);
    }

    localStorage.setItem('chked', JSON.stringify(inputNames));

    $('#name').toggle()
  }
});

<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type="text" id="name" />
<input type="checkbox" id="checkBoxName" onclick="checkBoxSetting(this.id)" />

您无法在此处进行测试，因为stackoverflow不允许您保存到本地存储。

Answer 2

对于本地存储，您应该使用Locker。

您必须在HTML文件中包含一个js库，然后您才能将数据存储在本地存储中，即使刷新页面，您也可以获得该数据。

以下是如何在本地存储中设置值的示例：

Lockr.set（“status”，“checked”）;

您可以按如下方式获取值：

var users = Lockr.get（'status'）;

在这里你可以获得locker.js库文件：

https://github.com/tsironis/lockr/blob/master/lockr.js

选中复选框时以及localStorage jQuery中隐藏输入字段

2 个答案: