[英]HTML5 Local Storage store form data for select box where multiple values are selected
I have a form which saves a users preferance in local storage, it can be seen in this fiddle or below . 我有一个表格可以保存用户在本地存储中的优势,可以在这个小提琴或下面看到。
With what I have so far there are 2 main problems. 到目前为止,我有两个主要问题。
My biggest problem is that what I have is great for select fields with one option but in this case the user can select multiple, so what do I need to add to it so that the user can save multiple values to local storage so next time they load the page there multiple selections will be saved? 我最大的问题是我所拥有的对于具有一个选项的选择字段非常有用,但在这种情况下,用户可以选择多个,因此我需要添加多少,以便用户可以将多个值保存到本地存储,以便下次他们加载页面会保存多个选项?
<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 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>');
}
You can add multiple options to an array using map
of jQuery : 您可以使用jQuery的map
向数组添加多个选项:
var optArray = $("#filter option:selected").map(function () {
return {
"title": this.innerHTML,
"value": this.value
}
}).get();
This will give you a nice array like this : 这会给你一个很好的数组,如下所示:
[
{ "title": "Andrew", "value": "111" },
{ "title": "Bill", "value": "222" },
{ "title": "Charles", "value": "333" }
]
For adding to localStorage : 要添加到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();
});
For refreshing the myStorage
container with your newly added people, you'll have to call this handler as the last event inside the `click event (above). 要使用新添加的人刷新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");
}
}
Then, in DOM ready
, call getFromStore
to refresh myContainer
on load of the page: 然后,在DOM ready
,调用getFromStore
以在页面加载时刷新myContainer
:
$(function() {
getFromStore();
})
Demo : http://jsfiddle.net/hungerpain/hqVGS/9/ 演示: http : //jsfiddle.net/hungerpain/hqVGS/9/
EDIT 编辑
To select the checkboxes by default, add the folowing line in the getFromStore
function : 要默认选中复选框,请在getFromStore
函数中添加以下行:
$("[value=" + store[k]["value"] + "]","#filter").prop("selected", true); //find the option with the corresponding value and select it
Updated demo : http://jsfiddle.net/hungerpain/hqVGS/10/ 更新的演示: http : //jsfiddle.net/hungerpain/hqVGS/10/
You could save multiple values in an array, 您可以在数组中保存多个值,
var myValuesArr = ['one','two','three'];
The array would need to be serialized before it is saved to localStorage
在将数组保存到localStorage
之前,需要对其进行序列化
var serialVals = JSON.stringify(myValuesArr);
localStorage.setItem('numbers',serialVals);
Likewise, the stored data will have to be unserialized after it is read back 同样,存储的数据在回读后必须进行反序列化
var serialVals = localStorage.getItem('numbers');
var myValuesArr = JSON.parse(serialVals);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.