javascript - 如何将选中的复选框和单选框的值存储在本地存储中

Question

我正在使用 JQuery Mobile我想在另一个页面中显示我从本地存储中获取的值应该检查第1页检查了哪些

在 HTML5 中:-

<div data-role="page" id="page1">
    <div data-role="content">
         <div data-role="fieldcontain">
  <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Levels:</legend>
     <input type="checkbox" value="One" name="one" id="checkbox-h-2a" class="custom1">
     <label for="checkbox-h-2a">One</label>
     <input type="checkbox" value="None" name="one" checked="checked" id="checkbox-h-2c" class="custom1">
     <label for="checkbox-h-2c">None</label>
   </fieldset>
  </form>
   </div>
   <div data-role="fieldcontain">
        <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Mode:</legend>
     <input type="radio" name="Two" id="radio-choice-h-2a" value="On" checked="checked" class="custom2">
     <label for="radio-choice-h-2a">On</label>
     <input type="radio" name="Two" id="radio-choice-h-2b" value="Off" class="custom2">
     <label for="radio-choice-h-2b">Off</label>
   </fieldset>
  </form>
   </div>   
    </div>
</div>
<div data-role="page" id="page2">
     <div data-role="content">
        <div data-role="fieldcontain">
  <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Levels:</legend>
     <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" class="custom1">
     <label for="checkbox-h-2a">One</label>
     <input type="checkbox" name="checkbox-h-2c"  id="checkbox-h-2c" class="custom1">
     <label for="checkbox-h-2c">None</label>
   </fieldset>
  </form>
   </div>
   <div data-role="fieldcontain">
        <form>
   <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Mode:</legend>
     <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on"  class="custom2">
     <label for="radio-choice-h-2a">Steward</label>
     <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" class="custom2">
     <label for="radio-choice-h-2b">Guest</label>
   </fieldset>
  </form>
   </div>
     </div>
</div>

在 Jquery 中:-

   function getRadioCheckedValue(radio_name)
    {
        var oRadio = $("input[type='radio']");
            for(var i = 0; i < oRadio.length; i++)
            {
                if(oRadio[i].checked)
                {
                    //return oRadio[i].value;
                    localStorage.setItem("mode", oRadio[i].value);
                }
    }
        return '';
    }

    function showSelectedNames(){
        var count = $("#checkid input:checked").length;
        var str = '';
        for(i=0;i<count;i++){
        if(i == count-1){
              str += $("#checkid input:checked")[i].value;
              localStorage.setItem("level", str);
        }
        else{
             str += $("#checkid input:checked")[i].value+',';
             localStorage.setItem("level", str);
        }
        }
        //alert("You selected----"+str);
    }

现在请帮助我如何设置在第 1 页中选中的第 2 页中的值

Answer 1

最简单的方法是将复选框和单选按钮的值存储到一个数组中，然后将其保存到localStorage。但是，请注意 localStorage 不接受数组，因此您需要在将其保存到 localStorage 之前执行 JSON.stringify() 然后 JSON.parse() 将其转换回可读数组。

以下是您如何收集所有复选框和单选按钮的值、存储它们然后在下一页读取它们的方法。

$(document).on("pagebeforehide", "[data-role=page]", function () {
    // variables
    var elements = [],
        id = '',
        value = '';

    // push values of checkboxes and radio buttons into an array
    $("[type=checkbox], [type=radio]", this).each(function () {
        id = $(this)[0].id;
        value = $(this).prop("checked");
        elements.push({
            "id": id,
                "value": value
        });
    });

    // convert array into a string
    // in order store it into localStorage
    localStorage["values"] = JSON.stringify(elements);
});

$(document).on("pagebeforeshow", "[data-role=page]", function () {
    // active page
    var active = $.mobile.activePage;

    // parse array of checkboxes and radio buttons
    var read_array = JSON.parse(localStorage["values"]);

    // check/uncheck checkboxes and radio buttons
    $.each(read_array, function (e, v) {
        var check_id = "#" + v.id,
            check_value = v.value;
        $(check_id, active).prop("checked", check_value).checkboxradio("refresh");
    });
});

注意元素id在其他页面上应该相同。

Demo