Как в моем примере проверить key в localStorage при загрузке страницы?

110
05 ноября 2019, 08:20

Как получить и проверить key при загрузке страницы я могу, но не в этом примере:

По нажатию на имя в списке я заношу так, как он написан в хранилище (если Alica, то записывается Alica, если Cristopher, то соответственно Cristopher), где ему добавляется true|false. Это значит, что по нажатию добавляется класс. При загрузке страницы я пытаюсь проверить тот самый key, который был записан, и если true навесить класс, если false - ничего. У меня возникает проблема получить key. В интернете я не могу найти близкие примеры, а те что есть уже подтянул.

Помогите пожалуйста.

//Listen click
var index = 0;  
    contact = Array.prototype.slice.call(document.querySelectorAll('.rd-guides li'));
        contact.forEach(function(e, i){
            e.addEventListener('click', function(event){
                index = i;
                    add();
            });
        });
    //Add name and class in lS
        guide = document.querySelectorAll('.guide');
            function add(){
                check = contact[index].classList.toggle('no-work');
                    localStorage.setItem(guide[index].innerHTML, check);
            };

Я могу без проблем занести в localStorage, что-то вроде такого ключа: localStorage.getItem('mykey-' + index, check) и на выходе получить, что-то очень не красивое типа mykey-0, mykey-1 и т.д. Я же пытаюсь научиться делать все по красоте. Любая помощь карается плюсиками от меня

Answer 1

на so не работает local storage, работает вот тут

var nodes = document.querySelectorAll('.example'); 
[].slice.call(nodes).forEach(handle); 
 
function handle(node) { 
  let txt = node.innerText; 
  node.addEventListener('click', () => { 
    node.classList.add('clicked'); 
    localStorage.setItem(txt, true); 
  }); 
  if (localStorage.getItem(txt)) 
    node.classList.add('clicked'); 
}
.example { 
  cursor:pointer; 
} 
 
.clicked { 
  background-color: red; 
}
<p class="example">hello world 1</p> 
<p class="example">hello world 2</p> 
<p class="example">hello world 3</p>

READ ALSO
Ошибка в расширении Emmet LiveStyle в консоли js

Ошибка в расширении Emmet LiveStyle в консоли js

Собственно данная ошибка выводится в хроме в любой складке

135
Как управлять скоростью анимации в canvas?

Как управлять скоростью анимации в canvas?

Коллеги, как думаете, как я могу под конец анимации плавно замедлять отрисовку круга? Опыт javascript = junior

94
Проблема с слайдером цен и чекбоксами

Проблема с слайдером цен и чекбоксами

Помогите пожалуйстаКак сделать так чтобы значения чекбоксов прибавлялись к Общей стоимости моего калькулятора? Спасибо

120
Как парсить тело POST-запроса в NodeJS?

Как парсить тело POST-запроса в NodeJS?

Отправляю следующий запрос к серверу:

115