是否有任何替代cookie或配置存储的方法 - Are there any alternatives for cookies or configuration storages

Are there any alternatives for cookies or configuration storages

我在Blogger平台上有一个博客(https://simulatorio.blogspot.com.br/?m=2)。我想做的是在每个单独的帖子中放置一个检查按钮，并使用某种机制(如cookie, PHP)来存储标记为已读的帖子。

示例:有人访问了一个页面，然后将其标记为已读。如果那个人隔天又回来访问同一个页面，它仍然会被标记为已读。也可以标记为未读

如何为每个访问者保存关于每个页面的此类信息?我认为这是可能的饼干(但我不知道如何使用它)。有没有可以在blogspot.com上使用的替代cookie

所以我刚刚为这个创建了一个小的香草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!