| Method | Description | Typical Use Case | |--------|-------------|--------------------| | | Access browser’s built-in history object (e.g., window.history in JavaScript) | Web apps needing backward/forward navigation | | Browser Extension | Use chrome.history or similar APIs to read and display recent sites | Cross-session history viewer | | Custom Local Storage | Save visited URLs, titles, and timestamps in localStorage or IndexedDB | Single-page applications (SPAs) with custom history | | Server-Side Log | Record user page views on the server with timestamps | Authenticated portals or dashboards |
Displaying a list of recently visited websites enhances user experience by enabling quick re-navigation. The appropriate implementation depends on the environment (browser, extension, SPA, or server), with careful attention to privacy and user control.
1. Purpose The goal is to provide users with quick access to their browsing history, improving navigation efficiency and allowing easy return to previously viewed web content.
// Save visit let visits = JSON.parse(localStorage.getItem('history')) || []; visits.unshift( url: window.location.href, title: document.title, time: new Date().toISOString() ); visits = visits.slice(0, 20); // keep last 20 localStorage.setItem('history', JSON.stringify(visits)); // Display list visits.forEach(visit => let item = <div><a href="$visit.url">$visit.title</a> <small>$new Date(visit.time).toLocaleString()</small></div> ; document.getElementById('historyList').innerHTML += item; );