1

JQuery Mobile を使用しています ローカル ストレージから取得した値を別のページに表示したい

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 の値を設定する方法を教えてください。

4

1 に答える 1

2

最も簡単な方法は、チェックボックスとラジオ ボタンの値を配列に格納し、それを に保存することlocalStorageです。ただし、localStorageは配列を受け入れないことに注意してください。そのため、JSON.stringify()保存する前に配列を読み取り可能な配列に変換する必要がlocalStorageあります。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は他のページでも同じである必要があります。

デモ

于 2013-11-13T11:53:28.950 に答える