Как сохранить несколько флажков в локальном хранилище?

Question

Я пытаюсь сохранить несколько флажков в локальном хранилище, см. Код ниже, и вы получите эту идею.

То, что я пытался до сих пор:

$(function() { 
var data = localStorage.getItem("favorite"); 

if (data !== null) { 
    $("input[name='favorites']").attr("checked", "checked"); 
} 
}); 
$("input[name='favorites']").click(function() { 

if ($(this).is(":checked")) { 
    localStorage.setItem("favorite", $(this).val()); 
} else { 
    localStorage.removeItem("favorite"); 
} 
}); 

Html

<input type="checkbox" class="faChkRnd" name="favorite1" id="like"> 
<input type="checkbox" class="faChkRnd" name="favorite2" id="like1"> 
<input type="checkbox" class="faChkRnd" name="favorite3" id="like2"> 

Answer 1

Просто сериализуйте их.

$('.faChkRnd').on('click', function() { 
    var fav, favs = []; 
    $('.faChkRnd').each(function() { // run through each of the checkboxes 
     fav = {id: $(this).attr('id'), value: $(this).prop('checked')}; 
     favs.push(fav); 
    } 
    localStorage.setItem("favorites", JSON.stringify(favs)); 
}); 

Они будут сохранены в формате JSON, как так:

"[{\"id\": \"like\", \"value\": true},{\"id\": \"like2\", \"value\": true},{\"id\": \"like3\", \"value\": true}]" 

Что вы можете позже нагрузка:

var favorites = JSON.parse(localStorage.getItem('favorites')); 

И петля через переназначить:

for (var i=0; i<favorites.length; i++) { 
    $('#' + favorites[i].id).prop('checked', favorites[i].value); 
} 

Вот working fiddle. Вы можете установить флажок и обновить, чтобы увидеть загруженные значения.

Answer 2

Это было бы меньше операций с массивами вы можете обойтись без 'IF'. С каждым кликом просто перезагружайте все выбранные флажки.

$("input[name='favorites']").click(function() { 
    var c = []; 
    $(this).is(":checked").each(function (i) { 
     c.push($(this).attr('id')); 
     localStorage.setItem("favorite", JSON.stringify(c)); 
    });   
}); 

Чтобы получить значение:

var fav = JSON.parse(localStorage.getItem("favorite")); 

Answer 3

Мы имеем два случая здесь

Case 1:

Хочет хранить значения флажка для элементов с разными названиями здесь является пример для этого сценария:

<input type="checkbox" class="faChkRnd" name="favorite1" id="like" value="val1"> 
<input type="checkbox" class="faChkRnd" name="favorite2" id="like1" value="val2"> 
<input type="checkbox" class="faChkRnd" name="favorite3" id="like2" value="val3"> 

здесь все checkboxs есть имя, которое начинается с favorite, так что мы можем ссылаться на них, используя эту информацию, а затем сохранить каждое имя флажка с соответствующим значением в качестве отдельного пункта в localStorage Вот код JS:

$("input[name*='favorite']").change(function() { 
    var name = $(this).attr('name'), 
     value = $(this).val(); 

    localStorage.setItem(name,value); 
    console.log(localStorage.getItem(name));   
}); 

Случай 2:

Мы хотим, чтобы ссылаться на несколько checkboxs с же именем. Сначала мы изменяем значение имени атрибута, как показано в следующем:

<input type="checkbox" class="faChkRnd" name="favorite" id="like" value="val1"> 
<input type="checkbox" class="faChkRnd" name="favorite" id="like1" value="val2"> 
<input type="checkbox" class="faChkRnd" name="favorite" id="like2" value="val3"> 

Во-вторых, мы получаем данные, как мы делали раньше, но специальная вещь на этот раз в том, что eventListener срабатывает, когда каждый элемент с этим именем изменяет свойство checked, поэтому значение генерируется снова с правильным значением, и это массив, что точно, потому что у нас есть несколько значений
Теперь последний трюк состоит в том, чтобы преобразовать этот массив значений в строку, используя удивительность JSON объект, подобный этому :

var valueStringified = JSON.stringify(value); 

ИЛИ достаточно просто использовать свой собственный разделитель, чтобы присоединиться значения массива, например:

var valueStringified = value.join(','); 

Теперь хранить его в LocalStorage, как одна строка

localStorage.setItem('favorite',valueStringified); 

И когда вы хотите получить значение элемента, очень просто получить имя элемента localStorage.getItem('favorite'), а затем разделить его, чтобы получить массив, используя предыдущий разделитель, что-то вроде этого:

var values = localStorage.getItem('favorite').split(','); 

Наконец, это он

Here is a jsfiddle example

Надеется, что это помогает.