Как получить значение флажка из localStorage

Существует страница с множеством различных вопросов-флажков, которые затем отправляются и заполняются на следующей странице, однако эта страница обновляется, и уже раздраженный потенциальный клиент должен вернуться и снова заполнить форму.
Теперь у меня настроено локальное хранилище, поэтому ему не нужно снова устанавливать все флажки, ему просто нужно повторно отправить форму и вернуть его в действие.

Как сохранить значения, заполненные на проблемной странице, чтобы этому парню не пришлось возвращаться к повторной отправке?

//SIZE SAVE
function save() {
localStorage.setItem('100', checkbox.checked);
var checkbox = document.getElementById('100');
localStorage.setItem('200', checkbox.checked);
var checkbox = document.getElementById('200');

//SIZE LOAD
function load() {
var checked = JSON.parse(localStorage.getItem('100'));
document.getElementById("100").checked = checked;
var checked = JSON.parse(localStorage.getItem('200'));
document.getElementById("200").checked = checked;//THIS PAGE NEEDS THE CHECKMARK
echo get_site_url().
"/the/checkmark/selected/was/".$_POST['check_group'].
"/.png";
}

0

Решение

Я думаю, что сейчас все очень просто, особенно для этой функции, если вы напишите некоторый код, чтобы сделать управление всеми флажками в вашей форме.

Прежде всего, будет лучше, если вы объедините все свои флажки в одном месте.

В такую ​​функцию вы можете объявить все ваши селекторы флажков, которые хотите сохранить в localStoarge (теперь вам не нужно делать переменные для каждого селектора в нескольких местах в вашем коде)

function getCheckboxItems() {
return ['100', '200']
.map(function(selector) {
return {
selector: selector,
element: document.getElementById(selector)
}`enter code here`
});
}

Затем, чтобы упростить задачу, вы можете сохранить все значения из флажка в одном объекте, а не сохранять результат в нескольких ключах, таким образом, намного проще осуществлять управление (допустим, вы хотите стереть все значения или обновить только Кроме)

Следующая функция будет принимать в качестве аргумента все элементы флажка из вышеприведенной функции. Дело в том, что функция, приведенная выше, вернет массив с идентификатором флажка и элементом флажка, а затем просто сведет весь этот массив в эту функцию в один объект, содержащий все идентификаторы и значения, после этого вы просто сохраняете объект в localStorage

function serializeCheckboxes(elements) {
var container = elements.reduce(function (accumulator, item) {
accumulator[item.selector] = item.element.checked;
return accumulator;
}, {})

localStorage.setItem('container', JSON.stringify(container));
}

function save() {
var elements = getCheckboxItems();
serializeCheckboxes(elements);
}

После этого вам понадобится другая функция, которая будет считывать все значения из localStorge и помещать их в ваш флажок «проверено» состояние

function readCheckboxes() {
var storage = localStorage.getItem('container'), //Your key
container = (storage) ? JSON.parse(storage) : {};

Object.keys(container).forEach(function(key) {
var element = document.getElementById(key);

if(element) {
element.checked = container[key];
}
});
}

Это простой сервис, который может управлять вашей проблемой, но я думаю, что для любых дополнительных изменений вы можете настроить это решение намного проще, вместо того, чтобы хранить все в нескольких переменных, также если вы добавляете больше элементов флажков в свое приложение с этим решением, которое вы просто добавляете соответствующий идентификатор в массив из первой функции.

Живой пример здесь:
https://jsbin.com/xejibihiso/edit?html,js,output

2

Другие решения

localStorage имеет две основные функции, getItem а также setItem, За setItem Вы передаете ключ и значение. Если вы снова напишите на этот ключ, он перезапишет это значение. Так что в вашем случае, если флажок установлен, вы бы сделали

localStorage.setItem("checkbox_value", true)

и когда он не отмечен, вы вместо этого переходите в false. Чтобы получить значение, вы можете посмотреть с помощью jQuery следующим образом:

$(checkbox).is(':checked')

и используйте простое предложение if-else, чтобы передать значение true или false. затем, когда вы перезагрузите страницу, на $(document).ready() вы можете получить значения с помощью

localStorage.getItem(key)

и использовать JavaScript, чтобы установить значения флажков.

localStorage только позволяет хранить строки. Что вы можете сделать, это использовать цикл для создания строки, в которой все значения флажков разделены каким-либо разделителем. Так, например, если есть четыре флажка со значениями true false false true, вашей строкой будет «true \ nfalse \ nfalse \ ntrue», где \ n — разделитель. тогда вы можете сохранить эту строку в localStorage и когда вы получаете его, вы можете поместить все значения в массив следующим образом:

array = localStorage.getItem(key).split('\n').

Затем вы можете заполнить свои флажки этим вновь полученным массивом. Спросите, если что-то нуждается в разъяснении.

1

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector