Question

有一个包含许多不同复选框问题的页面然后被提交并填充到下一页，但是这个页面会被刷新，而已经烦恼的潜在客户需要返回并再次填写表单。现在我已经设置了本地存储，因此他不需要再次重新选择所有复选框，他只需要重新提交表单和他的背部。

如何保持问题页面上填充的值，以便这个家伙不必重新提交？

＆＃13;

//SIZE SAVE
function save() {
  localStorage.setItem('100', checkbox.checked);
  var checkbox = document.getElementById('100');
  localStorage.setItem('200', checkbox.checked);
  var checkbox = document.getElementById('200');

  //SIZE LOAD
  function load() {
    var checked = JSON.parse(localStorage.getItem('100'));
    document.getElementById("100").checked = checked;
    var checked = JSON.parse(localStorage.getItem('200'));
    document.getElementById("200").checked = checked;


    //THIS PAGE NEEDS THE CHECKMARK 
    echo get_site_url().
    "/the/checkmark/selected/was/".$_POST['check_group'].
    "/.png";
  }

＆＃13;

Answer 1

我认为现在很简单，特别是对于该功能，如果你编写一些代码来管理表单中的所有复选框。

首先，最好将所有复选框分组到一个地方。

在这样的函数中，您可以将要保存的所有复选框选择器声明为localStoarge（现在您不需要为每个选择器将变量放入代码中的多个位置） < / p>

function getCheckboxItems() {
    return ['100', '200']
        .map(function(selector) {
            return {
                selector: selector,
                element: document.getElementById(selector)
            }`enter code here`
        });
}

然后为了使事情变得更简单，您可以将复选框中的所有值存储到单个对象中，而不是将结果保存在多个键中，这样可以更简单地进行管理（假设您要删除所有值或仅更新部分）

以下函数将上述函数中的所有复选框项作为参数，点是上面的函数将返回一个带有复选框id和复选框元素的数组，而不是只是将所有数组减少到此函数中到包含所有id和值的单个对象之后，您只需将对象存储到localStorage

function serializeCheckboxes(elements) {
    var container = elements.reduce(function (accumulator, item) {
        accumulator[item.selector] = item.element.checked;
        return accumulator;
    }, {})

    localStorage.setItem('container', JSON.stringify(container));
}

function save() {
    var elements = getCheckboxItems();
    serializeCheckboxes(elements);
}

在此之后你需要另一个函数来读取localStorge中的所有值并将它们放入你的复选框“已检查”状态

function readCheckboxes() {
    var storage = localStorage.getItem('container'), //Your key
        container = (storage) ? JSON.parse(storage) : {};

    Object.keys(container).forEach(function(key) {
        var element = document.getElementById(key);

        if(element) {
            element.checked = container[key];
        }
    });
}

这只是一个可以管理您的问题的简单服务，但我认为，对于任何其他更改，您可以更简单地自定义此解决方案，而不是将所有变量保存到多个变量中，如果您使用此解决方案向应用程序中添加更多复选框元素你只需从第一个函数中将相应的id添加到数组中。

这里有一个实例： https://jsbin.com/xejibihiso/edit?html,js,output

Answer 2

localStorage有两个主要功能，getItem和setItem。对于setItem，您传入一个键和一个值。如果再次写入该键，它将重写该值。因此，在您的情况下，如果选中一个框，您将执行

localStorage.setItem("checkbox_value", true)

如果未选中，则会传入false。要获得值，您可以使用jQuery来查看：

$(checkbox).is(':checked')

并使用简单的if-else子句传入true或false。然后当您重新加载页面时，在$(document).ready()上，您可以使用

获取值

localStorage.getItem(key)

并使用JavaScript设置复选框值。

localStorage仅允许您存储字符串。你可以做的是使用一个循环来创建一个字符串，其中所有复选框值都由一些分隔符分隔。因此，例如，如果有四个复选框的值为true，则为false，则您的字符串将为“true \ nfalse \ nfalse \ ntrue”，其中\ n是分隔符。那么您可以将该字符串存储在localStorage中，当您检索它时，您可以将所有值放入一个数组中，如下所示：

array = localStorage.getItem(key).split('\n').

然后，您可以使用新检索的数组填充复选框。询问是否需要澄清。

如何从localStorage获取复选框值

2 个答案: