@midarovrk

Как сделать сохранение в localStorage отдельно для каждой страницы?

Всем привет.
Помогите доработать скрипт:

<span onclick="onclickItsRead()" id="idItsRead">Прочитано</span>

<script>
var idItsRead = document.getElementById('idItsRead');

function onclickItsRead() {
  idItsRead.style.color = (idItsRead.style.color == 'red') ? '' : 'red';
  localStorage.setItem('ReadCom', idItsRead.style.color);  
}

if(localStorage.getItem('ReadCom') == 'red') { 
  document.getElementById('idItsRead').style.color= 'red';
}
</script>


Что делает скрипт:
При нажатии на "Прочитано" цвет текста окрашивается в красный, при повторном нажатии убирает окрас. И всё это сохраняется в хранилище localStorage.

Проблема в том что, это делается для всего сайта в целом, а как сделать чтобы это работало только для одной страницы, ну чтобы на другой опять можно было окрасить текст?

В общем я хочу сделать чтобы пользователь мог помечать какой материал на сайте он прочитал, а какой нет. Очень надеюсь на помощь.
  • Вопрос задан
  • 582 просмотра
Решения вопроса 1
vawsan
@vawsan
Frontend Developer
Добавьте в идентификатор урл страницы и все. Лучше конечно его обрезать, чтобы был без слешей и прочих символов.
<script>
var idItsRead = document.getElementById('idItsRead');

function onclickItsRead() {
  idItsRead.style.color = (idItsRead.style.color == 'red') ? '' : 'red';
  localStorage.setItem('ReadCom' + location.pathname, idItsRead.style.color);  
}

if(localStorage.getItem('ReadCom' + location.pathname) == 'red') { 
  document.getElementById('idItsRead').style.color= 'red';
}
</script>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы