localStorage how to save a checkbox
I want to save a checkbox with localstorage. So that when i have checked the box and I close the browser and i re-open it, it will still be checked. right now if i click on the checkbox and i press the save button it doesn’t save the checkbox.
how can i achieve this?
this is my code:
thanks for any advice!
4 Answers 4
1). Because boolean true is not equal to string «true» . So comparison checked == true is always false , and checkbox never gets checked.
Instead try this:
And remember whatever you store in localStorage is always a string, and only a string. That’s why when you save something more complex then primitive value (for example some object) make sure to use JSON.stringify on it first.
When you retrieve the value from localStorage you should convert it back to it’s corresponding javascript type.
In general load function can also be improved:
2). Another problem will come up once you try to uncheck checkbox. You are not handling it currently, so change save function to this one:
Курсы javascript
и т.д. класс у них у всех одинаковый а name разные. Необходимо сохранить значение при перезагрузки. Пытался сам но не получается. Помогите пожалуйста.
побывал и так
<script>
$(document).ready(function() <
$.cookie(‘pname’, $(‘input[name=3W Clinic]:checked’).val() , <
expires: 1
>);
$("input[name=3W Clinic]:checked").val($.cookie(‘pname’));
>);
</script>
<script>
$(document).ready(function() <
var vibor = (".js-store-filter-opt").val();
$.cookie(‘pname’, vibor).val() , <
expires: 1
>);
$("input[name=3W Clinic]:checked").val($.cookie(‘pname’));
>);
</script>
Совет: Сохраняйте флажок Проверено состояние после перезагрузки страницы
Этот быстрый совет описывает, как ваш браузер запоминает состояние флажков после обновления страницы или когда пользователь уходит с вашего сайта, чтобы вернуться позже.
Может быть полезно сохранить постоянный флажок «Проверено состояние», если, например, вы используете флажки, чтобы позволить вашим пользователям устанавливать специфичные для сайта предпочтения, такие как открытие внешних ссылок в новом окне или скрытие определенных элементов страницы.
Для нетерпеливых среди вас есть демонстрация техники в конце статьи.
Разметка флажка
Итак, первое, что нам нужно, это несколько флажков. Вот некоторые, которые я сделал ранее:
Вы заметите, что я включил кнопку « Проверить все» , чтобы пользователь мог выбрать или отменить выбор всех полей одним щелчком мыши. Мы вернемся к этому позже.
Надеюсь, вы также заметите, что я использую метки для текста, относящегося к каждому из блоков. Само собой разумеется, что поля формы в любом случае должны иметь метки , но в случае флажков это особенно важно, поскольку позволяет пользователям выбирать / снимать флажок, щелкая текст метки.
Наконец, вы увидите, что я группирую метки и флажки внутри элементов уровня блока (в данном случае элементов <div> ), чтобы они отображались друг под другом и их было проще стилизовать.
Отвечая на изменения
Теперь давайте свяжем обработчик событий с флажками, чтобы что-то происходило всякий раз, когда вы нажимаете на них. Я использую jQuery для этого урока, хотя, конечно, это не обязательно. Вы можете включить его через CDN таким образом:
Здесь я использую селектор флажка jQuery psuedo-class : checkbox , которому предшествует идентификатор содержащего элемента <div> ( checkbox-container ). Это позволяет мне настраивать таргетинг только на те флажки, которые меня интересуют, а не на все флажки на странице.
Постоянный флажок Проверено состояние
Как вы, наверное, знаете, HTTP — это протокол без сохранения состояния . Это означает, что он обрабатывает каждый запрос как независимую транзакцию, не связанную с каким-либо предыдущим запросом. Следовательно, если вы установите флажок, а затем обновите страницу, браузер не сможет запомнить предыдущее состояние флажка и — в примере выше — отобразит его в неконтролируемой форме (хотя некоторые браузеры кэшируют значение ).
Чтобы обойти это, мы собираемся хранить состояния флажков на компьютере пользователя, используя локальное хранилище (которое является частью API веб-хранилища ). У него довольно хорошая поддержка браузера:
Чтобы изменить объект localStorage в JavaScript, вы можете использовать методы setItem и getItem :
Чтобы удалить элемент из локального хранилища, используйте метод removeItem .
Вы можете узнать больше о локальном хранилище здесь: HTML5 Web Storage
Что касается нашего кода, кажется, что, поскольку мы хотим сохранить все флажки, логичным выбором будет создание пар ключ / значение, состоящих из идентификаторов флажков и их соответствующего проверенного состояния. Мы можем сохранить их в объектном литерале, который мы можем добавить в локальное хранилище. Тем не менее, поскольку локальное хранилище может обрабатывать только пары ключ / значение, нам нужно будет структурировать объект перед его сохранением и проанализировать его при извлечении.
Давайте посмотрим, как мы можем это сделать:
Обратите внимание на логический оператор ИЛИ ( || ), который возвращает значение своего второго операнда, если первый является ложным. Мы используем это для назначения пустого объекта переменной checkboxValues , если в локальном хранилище не найдено ни одной записи. Это фактически то же самое, что и написание:
Также обратите внимание, что мы кэшируем ссылку на флажки, чтобы нам не приходилось продолжать запрашивать DOM. Это небольшой пример в таком маленьком примере, но это хорошая привычка, по мере роста вашего кода.
Последнее, что нужно сделать, это перебрать переменную checkboxValues при загрузке страницы и соответственно установить значение полей:
Вот и все. Теперь у нас есть постоянные флажки.
Если вы попытаетесь обновить Code Pen (нажав кнопку RERUN ), вы увидите, что флажки остаются установленными, в то время как если вы введете что-то в текстовый ввод, это исчезнет при перезагрузке.
Проверка и снятие отметки со всех ящиков
Чтобы завершить это, давайте реализуем кнопку « Проверить все» , чтобы пользователи могли выбрать или отменить выбор всего за один раз.
При нажатии эта кнопка должна проверять все флажки. Когда все флажки установлены, его текст должен измениться на Uncheck All, и его состояние также должно храниться в локальном хранилище.
Давайте начнем так:
Это приведет к тому, что текст кнопки изменится, когда все флажки будут отмечены или не отмечены.
Единственное, что может быть немного необычным, — это использование троичного условного updateButtonStatus методе updateButtonStatus . Это сокращение для оператора if и эквивалентно:
Теперь функция для выбора и отмены выбора:
Наконец, мы добавим новое значение к объекту в локальном хранилище, которое я переименовал, чтобы отразить тот факт, что в нем теперь хранятся различные типы значений. Я также переместил логику для обновления локального хранилища в его собственную функцию:
И при загрузке страницы:
демонстрация
Вот что у нас получилось.
Вывод
В этом уроке я продемонстрировал, как сохранить значения формы в локальном хранилище и как реализовать функциональность Check / Uncheck All для флажков в простой форме.
Если у вас есть какие-либо вопросы или комментарии, я был бы рад услышать их ниже.
Сохранение значения CHECKBOX
Сохранить значения отметок полей input[type=checkbox] при навигации по сайту или перезагрузке страницы.
Отмеченные поля должны оставаться отмеченными при перезагрузке, либо при переходе на другие страницы.
Решение
В качестве решения предлагается хранить значения атрибутов checked в кукисах броузера. При загрузке страницы скрипт будет проверять наличие нужного кукиса и присваивать его значение соответствующему checkbox-у. По событию change скрипт будет сохранять в кукисах очередное значение.
Поскольку не хочется захламлять кукисы большим количеством переменных, для данной задачи предлагается использовать единственный кукис, в котором будут записаны значение всех checkbox-ов в формате JSON.