How to make a webpage different based on whether or not someone has visited other parts of the site?

I'm rather new to html/css and almost know nothing too big on javascript so I'm not sure where to start on this. (And forgive me if I have improper use of terms!) I basically am working on a piece of hypertext fiction that is told entirely through html/css and the user will be directed to read through it based on the locations in a town. There is a webpage called places.html which has hyperlinks to:

However, there is one more webpage I want to add, but I only want it to appear after the user has visited at least three of those webpages listed above. The new addition that would be able to be seen would be graveyard.html, but again, this is only after the user has gone through at least three of the other webpages. I tried to find an answer to this and it seems as if cookies may be the solution? However, I only found one that changes what the index/first page appears to the user, so I don't understand it and searching on google doesn't seem to help me figure out a solution. Hopefully this explanation is enough and I would appreciate any help I can get!


  • There isn't really enough information to give a working example.

    Add an id and style to your graveyard link, so you can easily access it with JS and hide it until you need it.

    <a href="graveyard.html" id="hiddenlink" style="display:none;">Graveyard</a>

    Each page should also contain the following code, it adds the page name to a list stored in localStorage, and when more than 3 pages are in that list the graveyard link is displayed.

    When the graveyard page is visited, it resets the list and will be hidden again. (optional)

    document.addEventListener("DOMContentLoaded", () => {
        let page = window.location.pathname.split('/').pop()
        let list = JSON.parse(localStorage.getItem("list") || "[]")
        if (!list.includes(page)) { 
            localStorage.setItem("list", JSON.stringify(list))
        if (list.length > 3) {
        if (page == "graveyard.html") {
            localStorage.setItem("list", "[]")