1

我有一个表单可以将用户偏好保存在本地存储中，可以在这个小提琴或下面看到。

到目前为止，我有两个主要问题。

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

2 回答 2

2

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/

于 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 回答