Loading...
Kazalev avatar Kazalev 3 Точки

Запазване на checkbox state с localStorage

Здравейте, колеги!
Извинявам се предварително, ако въпросът ми не е за тук.

Проблемът е следният - имам няколко чекбокса, които по default са unchecked, искам да чекна един или повече от тях и след рефреш на страницата да останат чекнати(само избраните), като стойноста им да се запазва с localStorage.
В момента съм то тук при избиране на един или няколко след рефреш всички стават checked/unchecked.


Благодаря предварително! :)

1
Module: JS Web 20/08/2019 21:37:15
willystyle avatar willystyle 2472 Точки
Best Answer

Здравей,

ето как ти предлагам http://jsfiddle.net/6rk89qyp/13/

$(function() {    
    let boxes = JSON.parse(localStorage.getItem('boxes')) || {};
    $('input').each(function() {
      let key = $(this).context.value;
      $(this).context.checked = boxes[key]; 
     });
});

$('input').on('change', function(ev) {   
    let boxes = JSON.parse(localStorage.getItem('boxes')) || {};
    let key = ev.target.value;
    boxes[key] = ev.target.checked;
    localStorage.setItem('boxes', JSON.stringify(boxes));    
});

Така работи, но наистина вместо value е по-добре да ползваш друг атрибут, id или name например.

P.S. Препоръчвам ти:

https://www.youtube.com/watch?v=AwicscsvGLg

и https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

и след 20 минути ще си факир на localStorage :)

1
21/08/2019 18:05:11
Kazalev avatar Kazalev 3 Точки

Благодаря много за решението, истиана е че не съм се занимавал до сега с localStorage, преди месец минах JS Fundamentals, иначе повече няма да използвам value за такива неща, но в конкретния случай ще ми свърши работа ! :)

2
TeodorStefanovPld avatar TeodorStefanovPld 1274 Точки

първо ти spa или какво се опитваш да правиш ако е spa при рефреш ще се изгубят нормално .И да пазиш баш такива неща в localstorage-a е малко безумно. Такива неща се пазят в local state на компонента или в closure функция примерно. С тоя глобален this като те гледам как го размяташ е малък ужас и why jquery ... 

Дай малко повече инфо за какво става въпрос и технологията. Иначе като гледам сложи си по едно id или ключ на inputs да ги разпознаваш ти така няма как да разбереш кой е checked и кой не  еднакви са в дом-а

-1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.