Are there any alternatives for cookies or configuration storages

Question

I have a blog (https://simulatorio.blogspot.com.br/?m=2) on Blogger plataform. What I want to do is to place a check button in each individual post and use some sort of mechanism (as cookies, PHP) in order to storage that marked post as read.

Exemple: Someone visits a page, than mark it as read. If that person come back another day to visit the same page, it will be still marked as read. And also it's possible to mark as unread.

How can I save that kind of information about each page for each visitor? I think it is possible with cookies (but I don't know how to use it too). Are there any alternatives for cookies which can be used on blogspot.com?

It seemed that you want to store only on the clients' browser... Hmmm, so aside from cookie (which you don't know), there's another way of storing called localStorage... I bet you don't know much about that too... here's some reading: http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — barudo, Nov 03 '16 at 06:49
what you want to know, how to use cookies in php ? or who to use cookies on blogspot.com? — Raghavendra, Nov 03 '16 at 06:49
Why is this tagged with PHP when the question is about JavaScript on blogger? — M. Eriksson, Nov 03 '16 at 06:50
@barudo I'll search for localStorage, thanks! What I really want is allow the visitor to check a post as read, so next time he visits the blog he will skip the posts he already read. I'm going to post lots of questions from my university to help people practice for the university main test. — Paulo Dos Santos, Nov 03 '16 at 07:08
@MagnusEriksson I tagged with PHP because I'm looking for any kind of mechanism that helps me, and it can be in PHP. What I really want is allow the visitor to check a post as read, so next time he visits the blog he will skip the posts he already read. — Paulo Dos Santos, Nov 03 '16 at 07:10
@Raghavendra What I really want is allow the visitor to check a post as read, so next time he visits the blog he will skip the posts he already read. I'm going to post lots of questions from my university to help people practice for the university main test. — Paulo Dos Santos, Nov 03 '16 at 07:11
ok so it is related to blogspot.com not the php coding right ? — Raghavendra, Nov 03 '16 at 07:13
@Raghavendra Not exactly! It doesn't depend on blogspot.com. I can run PHP on blogspot.com. — Paulo Dos Santos, Nov 03 '16 at 07:17
@Raghavendra Do you think PHP can help me storage that? That means "allow the visitor to check a post as read, so next time he visits the blog he will skip the posts he already read." — Paulo Dos Santos, Nov 03 '16 at 07:20
ok so creating a cookie on load of the post which contains post ids which are marked as read can solve you problem. and you can display a button to mark unread when cookie contains post id. but it will be available to browser specific — Raghavendra, Nov 03 '16 at 07:24
@Raghavendra Hope I didn't bother you! I apologize for that if so. Thank you, Raghavendra! — Paulo Dos Santos, Nov 03 '16 at 07:27
@barudo I think localStorage is the tool I was looking for! Thank you! — Paulo Dos Santos, Nov 03 '16 at 07:30
actually i am less familiar with php. it can be achieved in php as well as in java-script or jquery if you want it to be only on client side(same post will be available as unread on other place for the user) — Raghavendra, Nov 03 '16 at 07:31
If there are only links that you want to mark as read why don't use CSS `:visited`? — CodeBrauer, Nov 03 '16 at 09:11
@PauloDosSantos than you could just add/remove a little bit of CSS with a JS toggle. - But since `:visited` is very limited - I don't know if it would match your style. I think localStorage would be than than the best part. So you just have an array in localStorage with visited links and than you add an eventListener on any link you need... — CodeBrauer, Nov 03 '16 at 13:52

CodeBrauer · Accepted Answer · 2016-11-03T20:43:21.480

So I've just create a little vanilla Javascript snippet for this one. It saves the href attribute in an array, which than is saved as JSON in localStorage. You could extend/edit it anyway - it is pretty easy coded - I will use it maybe also in 1 or 2 side projects.

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>

All links that should be tracked/saved/remembered will have the class trackVisit. So not all links on the page will be styled this way.

Now this little script will work with 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());
});

And add a bit of style to visited links:

a.visited {
  position: relative;
  color: #ccc;
  text-decoration: line-through;
  padding-left: 15px;
}
a.visited:before {
  content: "\2713 ";
  position: absolute;
  left: 0;
  top: -2px;
}

Now a demo can be also found at CodePen. I think with jQuery it would be cleaner but we don't need jQuery!

Yes - it works till you delete the browser data. Beside this localStorage has no expiry date (in its best case scenario). — CodeBrauer, Nov 03 '16 at 20:24

Are there any alternatives for cookies or configuration storages

1 Answers1