0

Как получить и проверить 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 и т.д. Я же пытаюсь научиться делать все по красоте. Любая помощь карается плюсиками от меня

2
  • Все слова вроде понятны, а вот смысла я уловить не могу 2 мар 2019 в 17:38
  • Я кликаю на <p class="class">Hello word</p>, выполняется функция: добавляется класс и заносится в localStorage запись, вот такая - Hello word true. На любой элемент с таким классом выполняется одна и та же функция. Проблема в том, что не могу написать условие при загрузки страницы, которое проверит key и если true накинет класс. Так понятней? 2 мар 2019 в 17:51

1 ответ 1

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>

4
  • А где у Вас проверка при загрузке страницы? Точнее посему при перезагрузке все осталось как было(в смысле работает)? 2 мар 2019 в 19:08
  • 1
    @Ученик if (localStorage.getItem(txt)) node.classList.add('clicked'); 2 мар 2019 в 19:18
  • А почему тогда у меня не проверяет?(я не включил фрагмент кода, но также писал if(guide in localStorage) и if(localStorage.getItem(guide)) ) 2 мар 2019 в 19:22
  • @Ученик ¯\_(ツ)_/¯ 2 мар 2019 в 19:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.