其中多个值被选择为选择框HTML5本地存储存储表单数据(HTML5 Local Storage st

我有一个保存在本地存储用户偏好研究一种形式，它可以被看作这个小提琴或以下。

与我有什么到目前为止有2个主要问题。

在点击保存按钮，你是为了空的，则myStorage追加你刚才在那里选择，这样他们就可以看到他们点击哪些结果直播。它只有在你重新运行小提琴回忆。

我最大的问题是，我有什么是伟大的一个选择，但在这种情况下选择字段，用户可以选择多，所以我需要添加到它，以便用户可以保存到这样下次他们本地存储多个值是什么加载页面有多个选项将被保存？

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

    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:

您可以添加多个选项，使用阵列map的jQuery：

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

文章来源: HTML5 Local Storage store form data for select box where multiple values are selected