HTML5本地存儲存儲選擇框的數據，其中選擇了多個值

Question

我有一個表格可以保存用戶在本地存儲中的優勢，可以在這個小提琴或下面看到。

到目前為止，我有兩個主要問題。

1. 單擊保存按鈕后，您將清空myStorage，然后將您剛剛選擇的內容附加到那里，這樣他們就可以看到他們點擊的實時結果。 它只記得你是否重新操作小提琴。

2. 我最大的問題是我所擁有的對於具有一個選項的選擇字段非常有用，但在這種情況下，用戶可以選擇多個，因此我需要添加多少，以便用戶可以將多個值保存到本地存儲，以便下次他們加載頁面會保存多個選項？

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

Answer 1

您可以使用jQuery的map向數組添加多個選項：

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 ，調用getFromStore以在頁面加載時刷新myContainer ：

$(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/

Answer 2

您可以在數組中保存多個值，

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