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

Question

[midarovrk]

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

<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.

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

В общем я хочу сделать чтобы пользователь мог помечать какой материал на сайте он прочитал, а какой нет. Очень надеюсь на помощь.

Answer 1

[Владимир Ио]

Добавьте в идентификатор урл страницы и все. Лучше конечно его обрезать, чтобы был без слешей и прочих символов.

<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>

Comments

[midarovrk]

Таким образом мне надо каждый раз добавлять урл в id для каждой страницы? Может есть другой автоматизированный способ?

И куда урл добавлять?
localStorage.setItem('ReadComУРЛСТРАНИЦЫ' + location.pathname, idItsRead.style.color);
if(localStorage.getItem('ReadComУРЛСТРАНИЦЫ' + location.pathname) == 'red')
Так?

[Николай]

смысл в том, чтобы названия ваших переменных содержали некий префикс, по которому вы можете определить, к какой странице относится этот параметр. А префикс может быть абсолютно любым, как вам больше нравится.

[Владимир Ио]

Николай: Я вам дал код уже со всеми модификациями. Просто попробуйте.

[midarovrk]

Владимир Ионов: действительно, надо было просто попробовать =) Огромнейшее вам спасибо!