Попробуйте этот пример, используя localStorage. Это позволит найти элементы тега <p> в теле, а затем использовать каждый элемент для получения идентификатора для справки.
Я попытался использовать скрипку, но у сайта есть жалоба на безопасность с localStorage.
Скопируйте / вставьте этот код в файл, чтобы попробовать. Обратите внимание, что вам, вероятно, потребуется обновить ссылку moment.js в этом коде, чтобы она соответствовала вашему пути к файлу.
<!doctype html>
<html>
<head>
<title>localStorage example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="moment.js"></script>
</head>
<body>
<div class='grid-container'>
<div class='item7'><p id='p0'>Sylus: </p></div>
<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>
</div>
<div class='grid-container'>
<div class='item7'><p id='p1'>Sylus: </p></div>
<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>
</div>
<script>
function cS(element) {
var pTag = element.parentElement.previousElementSibling.firstChild;
if (element.src == "htts://i.i.com/k.jpg")
{
element.src = "http://i.i.com/v.jpg";
var d = moment().format('dddd HH:mm');
var pText = 'Sylus: ' + d;
pTag.innertHTML = pText;
// Set (save) a reference to browser localStorage
localStorage.setItem(pTag.id, pText);
}
else
{
element.src = "htts://i.i.com/k.jpg";
pTag.innerHTML = "Sylus: ";
// Remove the stored reference. (delete this if not needed)
localStorage.removeItem(pTag.id);
}
}
$(document).ready(function() {
pElements = $('body').find('p').each(function(index, element) {
// Get the localStorage items. The retrieved <p> elements,
// we use their id value to reference the key in storage.
storageItem = localStorage.getItem(element.id);
if (storageItem) {
$('#' + element.id).text(storageItem);
}
});
});
</script>
</body>
</html>
После нажатия на изображение (нужно заменить на что-то реальное), откройте веб-инспектор браузера. В интерфейсе щелкните вкладку Storage, а затем разверните Локальное хранилище в списке (см. изображение ниже) и выберите тестируемый файл.
Будут отображены пары ключ / значение. Ключи являются ссылками на идентификаторы тега <p>, и значение будет иметь строки с меткой-датой, такие как Sylus: Wednesday 22:28.
Когда вы увидите одну или две записи, установленные для хранилища, закройте а затем снова откройте вкладку браузера. Элементы <p> с датами должны быть перезагружены со своими значениями из хранилища.
Область локального хранилища браузера должна быть похожа на изображение ниже:
