[英]Store multiple checkbox values in one localStorage key
How can I store multiple checkbox classnames in localStorage (when checked). 我如何在localStorage中存储多个复选框类名(选中时)。 The below script stores only one value, value:test in key:filter
以下脚本仅在key:filter中存储一个值value:test
It needs to store values: ["test2","test3"] when having these checkboxes checked. 选中这些复选框时,它需要存储值:[“ test2”,“ test3”]。 Maybe by using data-filter?
也许通过使用数据过滤器? I also would like to store the classname of the checkbox.
我也想存储复选框的类名。
What I have: 我有的:
$(function () {
var data = localStorage.getItem("filter");
if (data !== null) {
$("input[name='filter']").attr("checked", "checked");
}
});
$("input[name='filter']").click(function () {
if ($(this).is(":checked")) {
localStorage.setItem("filter", "test");
} else {
localStorage.removeItem("filter");
}
});
And the HTML: 和HTML:
<div class="filterbox">
<label><input name="filter" type="checkbox" class="test1" data-filter="1" /> Test 1 </label>
<label><input name="filter" type="checkbox" class="test2" data-filter="2" /> Test 2 </label>
<label><input name="filter" type="checkbox" class="test3" data-filter="3" /> Test 3 </label>
<label><input name="filter" type="checkbox" class="test4" data-filter="4" /> Test 4 </label>
</div>
A fiddle; 小提琴 http://jsfiddle.net/Dp4Tj/264/
http://jsfiddle.net/Dp4Tj/264/
Working fiddle: http://jsfiddle.net/j6ukqnrv/11/ 工作提琴: http : //jsfiddle.net/j6ukqnrv/11/
You can accomplish this by passing an array and using JSON.stringify and JSON.parse when you are reading from and writing to local storage. 您可以通过传递数组并在读取和写入本地存储时使用JSON.stringify和JSON.parse来实现此目的。
The Javascript: Javascript:
$(function () {
var data = localStorage.getItem("filter");
if (data !== null) {
$("input[name='filter']").attr("checked", "checked");
}
});
$("input[name='filter']").click(function (event) {
if ($(this).is(":checked")) {
var filterid = event.target.getAttribute('data-filter');
var storage = JSON.parse(localStorage.getItem('filter'));
var arr = [];
if(storage) {
arr = storage;
arr.push(filterid);
} else {
arr.push(filterid);
}
console.log(arr)
localStorage.setItem("filter", JSON.stringify(arr));
} else {
var filterid = event.target.getAttribute('data-filter');
var storage = JSON.parse(localStorage.getItem('filter'));
var arr = [];
if(storage) {
arr = storage;
var index = arr.indexOf(filterid);
if (index > -1) {
arr.splice(index, 1);
}
localStorage.setItem("filter", JSON.stringify(arr));
}
}
});
your HTML: 您的HTML:
<div class="filterbox">
<label><input name="filter" type="checkbox" class="test1" data-filter="1" /> Test 1 </label>
<label><input name="filter" type="checkbox" class="test2" data-filter="2" /> Test 2 </label>
<label><input name="filter" type="checkbox" class="test3" data-filter="3" /> Test 3 </label>
<label><input name="filter" type="checkbox" class="test4" data-filter="4" /> Test 4 </label>
</div>
You can use like this: 您可以这样使用:
$(function () {
var data = localStorage.getItem("filter").split(',');
console.log(data)
$.each(data, function (i, v) {
$("input[class='" + v + "']").prop('checked', true);
});
$("input[name='filter']").change(function () {
var selected = [];
$("input[name='filter']:checked").each(function () {
selected.push($(this).attr('class'));
});
console.log(selected);
localStorage.setItem("filter", selected.toString());
});
}); });
Use JSON.stringify and JSON.parse since you need to pass strings to localStorage.setItem : 使用JSON.stringify和JSON.parse,因为您需要将字符串传递给localStorage.setItem :
var arr = ["test2", "test3"];
localStorage.setItem("filter", JSON.stringify(arr));
var newArr = JSON.parse(localStorage.getItem("filter"));
console.log(newArray); // ["test2", "test3"]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.