Храните несколько значений флажков в одном ключе localStorage

Question

Как сохранить несколько имен классов-флажков в localStorage (если установлен).В приведенном ниже сценарии хранится только одно значение, значение: test в ключе: filter

. Необходимо сохранить значения: ["test2", "test3"], если эти флажки установлены.Может быть, с помощью фильтра данных?Я также хотел бы сохранить имя класса флажка.

Что у меня есть:

$(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");
    } 
});

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

Скрипка;http://jsfiddle.net/Dp4Tj/264/

Answer 1

Рабочая скрипка: http://jsfiddle.net/j6ukqnrv/11/

Это можно сделать, передав массив и используя JSON.stringify и JSON.parse при чтении и записи в локальное хранилище.

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

Ваш 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>

Answer 2

Вы можете использовать так:

$(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());
});

});

Answer 3

Используйте 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"]