技术求助：如何隐藏用户已访问过的页面链接？

Hey there! I’ve got a straightforward approach to solve this using browser local storage to track which pages the user has visited. Here’s how to implement it step by step:

Core Idea #

We’ll use localStorage to keep a record of pages the user has navigated to. On each page load, we’ll:

1. Mark the current page as visited (if it isn’t already)
2. Hide all links that point to pages the user has already visited

Step 1: Set Up Your HTML Links #

First, add a consistent class and a data-page attribute to all your page links so we can target them easily. This attribute will hold a unique identifier for each page (like "A", "B", "C"):

<!-- Place this at the bottom of each page (A.html, B.html, C.html) -->
<div class="page-navigation">
  <a href="A.html" class="page-link" data-page="A">Go to Page A</a>
  <a href="B.html" class="page-link" data-page="B">Go to Page B</a>
  <a href="C.html" class="page-link" data-page="C">Go to Page C</a>
</div>

Step 2: Add the JavaScript Logic #

Add this script to the bottom of each page (make sure to update the currentPage value to match the actual page):

// 1. Define the unique ID for the current page (update this for each page!)
const currentPage = "A"; // Change to "B" for B.html, "C" for C.html

// 2. Get or initialize the visited pages list from localStorage
let visitedPages = JSON.parse(localStorage.getItem('visitedPages')) || [];

// 3. Mark current page as visited if it's not already in the list
if (!visitedPages.includes(currentPage)) {
  visitedPages.push(currentPage);
  localStorage.setItem('visitedPages', JSON.stringify(visitedPages));
}

// 4. Hide links to already visited pages
const pageLinks = document.querySelectorAll('.page-link');
pageLinks.forEach(link => {
  const targetPage = link.dataset.page;
  if (visitedPages.includes(targetPage)) {
    link.style.display = 'none';
    // Optional: If you want to disable instead of hide, use this:
    // link.disabled = true;
    // link.style.opacity = 0.5;
  }
});

Key Notes #

• LocalStorage Persistence: The visited pages list will stay saved even if the user closes the browser. If you want the record to reset when the browser closes, replace localStorage with sessionStorage everywhere in the code.
• Same Domain Requirement: This works only if all pages (A, B, C) are hosted on the same domain (since localStorage is domain-bound).
• Testing & Reset: To reset the visited list during testing, open your browser’s dev tools, go to the "Application" tab, find "LocalStorage", and delete the visitedPages entry.

Example Flow #

1. User first loads Page A: Script adds "A" to visited pages. Links to B and C are visible, link to A is hidden.
2. User clicks to Page B: Script adds "B" to visited pages. Link to A (already visited) is hidden, link to C is visible.
3. User clicks to Page C: Script adds "C" to visited pages. Links to A and B are hidden.

内容的提问来源于stack exchange，提问作者Beltyboy118