Mark link as "read"

JavaScript
1

Hi,

I have a listing website which lists contests. What I am wanting to do is to have a link that says “Entered?” and then when the user clicks on it, it will show “Entered” or a check icon.

I am guessing this will have to be done based on cookies?

What would be the best way to achieve this?

Thanks

2

How about using a:visited?

3

I was thinking the same thing, but apparently you can’t add generated content to a visited link (source: https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/)

4

I can’t find a workaround for this specific use case (though I’m sure there is one), but you could add an event listener to your links which tracks which links were selected, but that would only capture those links visited during that site visit - it wouldn’t track the ones visited from a previous session.

5

Thanks for the replies. I’m ideally after something that would remain if the user leaves and then re-visits the website which was why I thought cookies would be needed.

6

window.localStorage.setItem("entered","INeverExpireUnlikeSessionStorage")

2 Likes
7

Thanks for the reply.

I have put this together, but I don’t think I have the above localStorage part right.

8

You’ll need to check for the value in storage when a visitor lands on your page and adjust things accordingly.

A bit like what I’m doing here.

1 Like
9

More like exactly what you’re doing with your check all button :wink:

10

@ James_Hibbard 0 Thank you very much! That worked great!

Am I right in thinking the localStorage will only get wiped when browser history/cache is cleared?

Thanks again :smiley:

11

Sorry, I have a question.

If I use the <div id="checkbox-container"> and the checkboxes with the same ID on other pages, will the checkboxes still be “remembered” ?

12

Yeah. Or when you expire it (which would rely on the user revisiting your page).

Depends how you set things up. If you have no JavaScript saving things to local storage on the other pages, then it doesn’t matter what the IDs are.

If you have a specific question, make a minimal runnable demo and I’ll be happy to take a look.

1 Like
13

Thanks for the reply.

How would I go about setting the expiry date? Ideally I would like it to never expire.

14

Then you don’t need to do anything and the only time it shall expire is when the user clears their browser cache.

1 Like
15

Great, thanks for your help and the great tutorial :slight_smile:

1 Like
16

Just an update on having the code on other pages -it does update other pages, so its all good :slight_smile:

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.