Почему функции записи в localStorage при первой загрузке страницы не срабатывают?

Question

[Асиков Артур]

Необходимо запомнить выбранные пользователем checkbox (с классом stat_inp) и введенный текст в textarea.

Проблема возникает именно при первой загрузке страницы. Изначально отмеченные checkbox и написанный текст в textarea улетучиваются( Со второй загрузки функции работают. В чем дело? Помогите исправить.

< code lang="javascript">
 (function(b) {
            var e = document.querySelectorAll(b),
                a = localStorage.getItem(b),
                a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
            [].forEach.call(e, function(c, d) {
                void 0 !== a[d] && (c.checked = a[d]);
                c.addEventListener("change", function() {
                    a[d] = c.checked;
                    localStorage.setItem(b, JSON.stringify(a))
                })
            })
		})(".stat_inp<?php echo $test['id']; ?>");
		
		

                    var elements_ta = document.querySelectorAll('textarea');
                    
                    function checkValidity() {};
                    
                    for (i=0; i<elements_ta.length; i++) {
                     (function(element) {
                       var id = element.getAttribute('id');
                       element.value = localStorage.getItem(id); // обязательно наличие у элементов id
                       element.oninput = function() {
                        localStorage.setItem(id, element.value);
                         checkValidity();
                       };
                     })(elements_ta[i]);
                    }

Comments

[ProjectSoft]

Направление - DOMContentLoaded
Вполне возможно, что элемент ещё не доступен во время выполнения скрипта.

В остальном нужно смотреть непосредственно на пациенте, где у вас оное реализуется. Ну и про вывод в консоль не забывайте. Трейсте в неё. Например

(function(b) {
	var e = document.querySelectorAll(b),
		a = localStorage.getItem(b);
	a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
	
	console.log(b, e, a);
	
	[].forEach.call(e, function(c, d) {
		void 0 !== a[d] && (c.checked = a[d]);
		c.addEventListener("change", function() {
			a[d] = c.checked;
			localStorage.setItem(b, JSON.stringify(a))
		})
	});
})(".stat_inp<?php echo $test['id']; ?>");

И смотрите, что в консоли.

Answer 1

[Дмитрий Беляев]

Вангую, что JSON.parse падает с ошибкой, когда localStorage пустой.
Консоль разработчика Вам в помощь

Comments

[Асиков Артур]

Дмитрий, спасибо за подсказку. Когда исправил проверку переменной a все заработало с первого раза.

(function(b) {
            var e = document.querySelectorAll(b),
				a = localStorage.getItem(b);
				if (typeof a !== 'undefined' && a !== null){
					var a = JSON.parse(a);
				} else{
					var a = {};
					localStorage.setItem(b, JSON.stringify(a));
				}
            [].forEach.call(e, function(c, d) {
                c.checked = a[d];
                c.addEventListener("change", function() {
                    a[d] = c.checked;
                    localStorage.setItem(b, JSON.stringify(a))
				});
            })
    })(".stat_inp<?php echo $test['id']; ?>");