網頁瀏覽記錄展示功能的實現方案（JavaScript + Cookie）

需求分析

類似「歷史觀看」「最近瀏覽」功能，需在客戶端記錄用戶點擊的鏈接（標題+URL），並在側邊欄或頁面底部展示最近 5-10 條記錄，刷新頁面不丟失。

技術選型對比

Cookie 方案完整代碼（兼容性最佳）

<script>
// 記錄點擊
document.addEventListener('click', function(e) {
    let a = e.target.closest('a');
    if (!a || !a.href) return;
    let title = a.innerText.trim();
    let url = a.href;
    if (!title || title.length > 50) return; // 過濾無效
    saveHistory(title, url);
}, true);

// 存入 Cookie（最多 10 條，30 天有效）
function saveHistory(title, url) {
    let key = 'browse_history';
    let list = JSON.parse(getCookie(key) || '[]');
    // 去重
    list = list.filter(item => item.url !== url);
    // 新增到頭部
    list.unshift({title, url, time: Date.now()});
    // 截取前 10
    list = list.slice(0, 10);
    setCookie(key, JSON.stringify(list), 30);
}

// 顯示歷史
function renderHistory(containerId) {
    let list = JSON.parse(getCookie('browse_history') || '[]');
    let html = list.map(item => 
        `${item.title}`
    ).join('
');
    document.getElementById(containerId).innerHTML = html || '暫無瀏覽記錄';
}

// Cookie 工具函數
function setCookie(name, value, days) {
    let exp = new Date();
    exp.setTime(exp.getTime() + days*24*60*60*1000);
    document.cookie = `${name}=${encodeURIComponent(value)};expires=${exp.toGMTString()};path=/`;
}
function getCookie(name) {
    let arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
    return arr ? decodeURIComponent(arr[2]) : null;
}

// 頁面加載時渲染
window.addEventListener('DOMContentLoaded', () => renderHistory('history-box'));
</script>

// 頁面放置顯示容器
<div id="history-box"></div>

關鍵優化點

• 使用 JSON 序列化存儲結構化數據，避免手動拼接分隔符出錯。
• 事件委託綁定在 document，動態生成的鏈接也能捕獲。
• 去重邏輯保證同一頁面不重複記錄。
• 限制條數防止 Cookie 膨脹超過 4KB 限制。

進階擴展

• 結合 localStorage 作為備選，突破容量限制。
• 用戶登錄後同步至服務端數據庫，實現多設備同步。
• 添加「清空記錄」「單條刪除」交互按鈕。