Существуют ли альтернативы для файлов cookie или хранилищ конфигурации
У меня есть блог (https://simulatorio.blogspot.com.br/?m=2) на платформе Blogger. То, что я хочу сделать, это установить кнопку проверки в каждом отдельном сообщении и использовать какой-то механизм (например, куки, PHP) для хранения помеченного сообщения как прочитанного.
Пример: кто-то посещает страницу, а затем помечает ее как прочитанную. Если этот человек вернется в другой день, чтобы посетить ту же страницу, она все равно будет помечена как прочитанная. А также можно пометить как непрочитанное.
Как я могу сохранить такую информацию о каждой странице для каждого посетителя? Я думаю, что это возможно с куки (но я не знаю, как использовать это тоже). Существуют ли альтернативы для файлов cookie, которые можно использовать на blogspot.com?
Решение
Так что я просто создал небольшой ванильный фрагмент Javascript для этого. Это сохраняет href атрибут в массиве, который затем сохраняется как JSON в localStorage. Вы можете расширить / отредактировать его в любом случае — это довольно легко закодировать — я буду использовать его, возможно, также в 1 или 2 сторонних проектах.
HTML:
<h1>Repo services</h1>
<ul>
<li><a class="trackVisit" href="https://github.com">GitHub</a></li>
<li><a class="trackVisit" href="https://gitlab.com/explore">GitLab</a></li>
<li><a class="trackVisit" href="https://www.codeplex.com/">CodePlex</a></li>
<li><a class="trackVisit" href="https://bitbucket.org/">Bitbucket</a></li>
</ul>
<button>Reset</button>
Все ссылки, которые должны быть отслежены / сохранены / запомнены, будут иметь класс trackVisit, Поэтому не все ссылки на странице будут оформлены таким образом.
Теперь этот маленький скрипт будет работать с localStorage:
// helper function
var forEach = function(array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
// init
if (localStorage.getItem('visitedLinks') === null) {
localStorage.setItem('visitedLinks', JSON.stringify([]));
}
// get already visited links
function getVisitedLinks() {
return JSON.parse(localStorage.getItem('visitedLinks'));
}
// save visits
forEach(document.querySelectorAll('a.trackVisit'), function(index, element) {
element.addEventListener('click', function saveVisit() {
var visitedLinks = getVisitedLinks();
if (visitedLinks.indexOf(element.getAttribute('href')) === -1) {
visitedLinks.push(element.getAttribute('href'));
}
localStorage.setItem('visitedLinks', JSON.stringify(visitedLinks));
refreshVisits(visitedLinks);
});
});
// style the links
function refreshVisits(visitedLinks) {
forEach(document.querySelectorAll('a'), function(index, link) {
link.classList.remove('visited');
});
visitedLinks.forEach(function(el, key) {
if (document.querySelector('a[href="' + el + '"]') !== null) {
document.querySelector('a[href="' + el + '"]').classList.add('visited');
}
});
}
// run it!
refreshVisits(getVisitedLinks());
// reset visits button
document.querySelector('button').addEventListener('click', function() {
localStorage.setItem('visitedLinks', JSON.stringify([]));
refreshVisits(getVisitedLinks());
});
И добавьте немного стиля в посещаемые ссылки:
a.visited {
position: relative;
color: #ccc;
text-decoration: line-through;
padding-left: 15px;
}
a.visited:before {
content: "\2713 ";
position: absolute;
left: 0;
top: -2px;
}
Теперь демо также можно найти на CodePen. Я думаю, что с JQuery было бы чище, но нам не нужен JQuery!
Другие решения
Других решений пока нет …
detector