javascript - 如何从 localStorage 获取复选框值

Question

有一个页面有很多不同的复选框问题，然后提交并填充下一页，但是该页面会刷新，已经很恼火的潜在客户需要返回并再次填写表单。 现在我已经设置了本地存储，因此他不需要再次重新选择所有复选框，他只需要重新提交表单并恢复操作。

如何保持问题页面上填充的值，以便此人不必返回重新提交？

//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";
  }

Answer 1

我认为现在非常简单，特别是对于该功能来说，如果您编写一些代码来管理表单中的所有复选框，则尤其如此。

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

在这样的函数中，您可以声明要保存到 localStoarge 中的所有复选框选择器(现在您不需要将每个选择器的变量放入代码中的多个位置)

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