localStorage.getItem
Приветствую всех, задача такая, нужно у нескольких checkboxов сохранить их активность в localStorage, я в этом деле новичок, поэтому не знаю как сделать правильно.
Например есть 2 checkboxа (по факту их будет больше) <input type="checkbox" class="stat" name="column-1" value="1" checked > <input type="checkbox" class="stat" name="column-2" value="2" checked > функция записывающая в localStorage
$(".stat").change(function (event) {
if (this == event.target) {
var key = this.name;
if ($(this).is(":checked")) {
localStorage.setItem(key, "true");
} else {
localStorage.setItem(key, "false");
}
}
});
И вот здесь я делаю проверку
if (localStorage.getItem('column-1') == "true") {
$("input[name = column-1]").attr("checked");
} else {
$("input[name = column-1]").removeAttr("checked");
}
if (localStorage.getItem('column-2') == "true") {
$("input[name = column-2]").attr("checked");
} else {
$("input[name = column-2]").removeAttr("checked");
}
Ну если бы было всего 2 checkboxа, то я бы больше не стал бы головову ломать что дальше делать, но у меня должно быть больше checkboxов, подскажите как сделать правильную проверку для большого кол-ва checkbox |
$('input.stat').each(function(){
if (localStorage.getItem(this.name) == "true") {
this.checked = "checked";
} else {
this.removeAttribute("checked");
}
});
|
localStorage + checkbox сохранить выбранные чекбоксы
optsar,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" class="stat" name="column-1" value="1" checked >
<input type="checkbox" class="stat" name="column-2" value="2" checked >
<script>
(function(b) {
var e = document.querySelectorAll(b),
a = localStorage.getItem(b),
a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
[].forEach.call(e, function(c, d) {
void 0 !== a[d] && (c.checked = a[d]);
c.addEventListener("change", function() {
a[d] = c.checked;
localStorage.setItem(b, JSON.stringify(a))
})
})
})(".stat");
</script>
</body>
</html>
|
Спасибо всем !
|
ok
|
Добрый день!
Я попробовал ваши скрипты в рамках своего кода, и знаете все работает! значения выпадающего списка и чекбокса сохраняются. Но есть нюанс! дело в том что выпадающий список и чекбокс формируются (заполняются значениями) через цикл в html, т.к. содержания для этих форм будет динамичным, я не могу жестко сделать эти спики построчно. И тут такое дело: если я на одном объекте (странице) делаю все изменения, которые успешно сохранятся благодаря вашим скриптам, но на странице другого объекта по умолчанию сохраняются те же пункты из предыдущего объекта. Вот так Я из БД силами Spring Boot вывожу формы на экран в html (thymeleaf) |
| Часовой пояс GMT +3, время: 17:06. |