Question

我在Blogger平台上有一个博客（https://simulatorio.blogspot.com.br/?m=2）。我想要做的是在每个帖子中放置一个复选按钮，并使用某种机制（如cookie，PHP），以便将标记的帖子存储为已读。

例子：有人访问某个页面，而不是将其标记为已读。如果该人在另一天回来访问同一页面，它仍将被标记为已读。并且可以将其标记为未读。

如何为每位访客保存有关每个页面的信息？我认为有可能使用cookies（但我也不知道如何使用它）。有没有可以在blogspot.com上使用的cookie的替代品？

Answer 1

所以我只为这个创建一个小的vanilla Javascript片段。它将href属性保存在一个数组中，而不是在localStorage中保存为JSON。无论如何你可以扩展/编辑它 - 它非常容易编码 - 我也可以在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会更干净但we don't need jQuery!

是否有cookie或配置存储的替代方案

1 个答案: