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

Question

I am using JQuery Mobile I want to display the value in another page which i get from local storage It Should been check which is been checked in page1

In 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>

In 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);
    }

Now Plz help me out how to set the value in Page 2 which is been checked in Page1

Answer 1

The simplest way is to store values of checkboxes and radio buttons into an array and then save it to localStorage . However, note that localStorage doesn't accept arrays, so you need to JSON.stringify() before saving it into localStorage and then JSON.parse() to convert it back into a readable array.

Here is how you can collect values of all checkboxes and radio buttons, store them and then read them on next page.

$(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");
    });
});

Note: elements id should be the same on other pages.

Demo