0

サイトでローカル ストレージを動作させようとしていますが、苦労しています。

私はいくつかの「トグルスライダー」を持っています (これらのような: http://jquerymobile.com/test/docs/forms/switch/# )。ユーザーの選択をローカルストレージに保存して、ユーザーが戻ったときにまだ表示できるようにしたいと思います以前からの彼らの選択。

リストの最初のトグル スライダーで動作するようになりましたが、やりたいことは、各スライダーをループし、それぞれの「id」と「値」をローカル ストレージに保存することです。次に、保存したら、ページの読み込み時にそれらを復元し、ローカル ストレージの内容に応じてトグル スイッチを変更します。

これが私のコードです：

//code below saves id and value to local storage when save button is clicked
$("#button").click(function() {
    window.localStorage.setItem('flip-min-1', $("#flip-min-1").val());
});

これで動作し、ローカル ストレージで次のようになります。

Key: #flip-min-1    Value: yes or no depending on choice as it is a toggle slider

ブラウザーを閉じて再度開くと、ローカル ストレージからデータを取得し、それを使用して内容に応じてスライダーを切り替えます。

var storedText = window.localStorage.getItem('flip-min-1');

//if the variable in local storage is equal to yes
if(storedText = 'yes') {
    //then switch the toggle slider to the yes state so it appear in red and reads 'Attending'
    $("#flip-min-1").val(window.localStorage.getItem('flip-min-1')).keyup();
    //if the stored text is anything other than yes, the default select option will be no. By default the user is not attending any events
}

私が苦労しているのは、複数のトグル スイッチがあり、その ID と値をローカル ストレージに保存する必要があるという事実です!

私は本当に助けが必要です.誰かが親切に時間を前もって提供してくれるなら、私はとても助かります.事前に感謝します.Tom

4

1 に答える 1

0

スイッチの数が決まっている場合は、すべてを for ループに入れるだけです。

for(var i = 0; i < 5; i++) {
    $("#button" + i).click(function() {
        window.localStorage.setItem('flip-min-' + i, $("#flip-min-" + i).val());
    });
}

それ以外の場合は、次のようにすべてのクラスとデータ属性を指定できます。

<button class="mySwitch" data-number="1">Switch 1</button>
<button class="mySwitch" data-number="2">Switch 2</button>

そして、このようなコードを使用してください

// find all switches
$(".mySwitch")
// handle click event and save
.click(function() {
  var index = $(this).attr("data-number");
  window.localStorage.setItem('flip-min-' + index, $("#flip-min-" + index).val());
});
// load all states
.each(function() {
  var index = $(this).attr("data-number");
  var storedText = window.localStorage.getItem('flip-min-' + index);

  //if the variable in local storage is equal to yes
  if(storedText = 'yes') {
      //then switch the toggle slider to the yes state so it appear in red and reads 'Attending'
      $("#flip-min-1").val(window.localStorage.getItem('flip-min-' + index)).keyup();
      //if the stored text is anything other than yes, the default select option will be no. By default the user is not attending any events
  }
});
于 2013-01-10T11:51:49.813 に答える