1

ユーザーの設定をローカル ストレージに保存するフォームがあります。このフィドルまたは以下で確認できます。

私がこれまでに持っているものには、2つの主な問題があります。

  1. 保存ボタンをクリックすると、myStorage を空にし、そこに選択したものを追加して、クリックした内容のライブ結果を確認できるようにします。フィドルを再実行した場合にのみ記憶されます。

  2. 私の最大の問題は、私が持っているものが1つのオプションで選択フィールドに最適であることですが、この場合、ユーザーは複数を選択できるため、ユーザーが複数の値をローカルストレージに保存できるようにするには、何を追加する必要があるので、次回複数の選択が保存されるページをロードしますか?

    <form name="Filter">
<select multiple="1" id="filter">
    <option value="111">Andrew</option>
    <option value="222">Bill</option>
    <option value="333">Charles</option>
    <option value="444">Dikembe</option>
    <option value="555">Edward</option>
</select>
</form>
<div id="store">click to store</div>
<br>
<h3>People I have stored</h3>

<div id="myStorage"></div>

JS

    var iSelectedTitle = localStorage.getItem('title');
    var iSelectedVal = localStorage.getItem('value');
    console.log("iSelectedTitle: " + iSelectedTitle);
    console.log("iSelectedVal: " + iSelectedVal);

    $("#filter option").each(function () {
        if ($(this).val() == iSelectedVal) {
            $(this).attr("selected", "selected");
        }
    });

    $("#store").click(function () {
        var mytitle = $("#filter option:selected").text();
        var storedTitle = localStorage.setItem("title", mytitle);
        console.log("mytitle: " + mytitle);
        console.log("storedTitle: " + storedTitle);

        var myValue = $("#filter option:selected").val();
        var storedValue = localStorage.setItem("value", myValue);
        console.log("myValue: " + myValue);
        console.log("storedValue: " + storedValue);

        if (iSelectedTitle != "undefined") {
            $('#myStorage').empty().append(iSelectedTitle);
        }
    });
    if (iSelectedTitle != "undefined") {
        $('#myStorage').append(iSelectedTitle + ' - <a target= "_blank "href="http://www.example.com/' + iSelectedVal + '">View profile</a>');
    }
4

2 に答える 2

2

mapjQueryを使用して、配列に複数のオプションを追加できます。

var optArray = $("#filter option:selected").map(function () {
        return {
            "title": this.innerHTML,
            "value": this.value
        }
}).get();

これにより、次のような素敵な配列が得られます。

[
    { "title": "Andrew", "value": "111" },
    { "title": "Bill", "value": "222" },
    { "title": "Charles", "value": "333" }
]

localStorage に追加する場合:

$("#store").click(function () {
    //get the selected options in the form of an array
    var optArray = $("#filter option:selected").map(function () {
        return {
            "title": this.innerHTML,
            "value": this.value
        }
    }).get();
    console.log(optArray);
    //set that to localStorage
    localStorage["optArray"] = JSON.stringify(optArray);
    //refresh myStorage
    getFromStore();
});

新しく追加された人でコンテナーを更新するmyStorageには、このハンドラーを `click イベント (上記) 内の最後のイベントとして呼び出す必要があります。

var getFromStore = function () {
    //check if store values are null, if null, make store =[]
    var store = [undefined, null].indexOf(localStorage["optArray"]) != -1 ? [] : JSON.parse(localStorage["optArray"]);
    console.log(store);
    //empty container before u put values
    $('#myStorage').html('');
    //check if store is empty
    if (store.length != 0) {
        //loop over store if it aint empty and append the content into myStorage div
        for (var k in store) {
            var str = '<div>' + store[k]["title"] + ' - <a target= "_blank" href="http://www.example.com/' + store[k]["value"] + '">View profile</a></div>';
            console.log(store[k]);
            $('#myStorage').append(str);
        }
    } else {
        //do this if no data is found in localStorage
        $("#myStorage").html("No people found in store");
    }
}

次に、 で、ページの読み込み時に更新をDOM ready呼び出します。getFromStoremyContainer

$(function() {
  getFromStore();
})

デモ: http://jsfiddle.net/hungerpain/hqVGS/9/

編集

getFromStoreデフォルトでチェックボックスを選択するには、関数に次の行を追加します。

  $("[value=" + store[k]["value"] + "]","#filter").prop("selected", true); //find the option with the corresponding value and select it

更新されたデモ: http://jsfiddle.net/hungerpain/hqVGS/10/

于 2013-06-23T21:18:46.147 に答える
1

複数の値を配列に保存できます。

var myValuesArr = ['one','two','three'];

配列は、保存する前にシリアル化する必要がありますlocalStorage

var serialVals = JSON.stringify(myValuesArr);
localStorage.setItem('numbers',serialVals);

同様に、保存されたデータは、読み戻された後にシリアル化を解除する必要があります

var serialVals = localStorage.getItem('numbers');
var myValuesArr = JSON.parse(serialVals);
于 2013-06-22T11:06:11.503 に答える