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

Question

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

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

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

Answer 1

所以我刚刚为此创建了一个小香草 Javascript 片段。它将 href 属性保存在数组中，然后在 localStorage 中保存为 JSON。无论如何你都可以 extend/edit - 它很容易编码 - 我可能也会在 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>

所有应该是 tracked/saved/remembered 的链接都会有 class 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: "13 ";
  position: absolute;
  left: 0;
  top: -2px;
}

现在也可以在 CodePen. I think with jQuery it would be cleaner but we don't need jQuery!

找到演示

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

Are there any alternatives for cookies or configuration storages

php

cookies

jquery

blogger