PHP 實現瀏覽歷史記錄存儲至 Cookie 完整方案

需求背景

在無用戶登錄系統的輕量級應用中，利用 Cookie 記錄訪客瀏覽歷史（最近 10 條），可實現「最近瀏覽」、「返回上一頁」等體驗增強功能。本文提供完整可用代碼並分析關鍵細節。

核心實現代碼

<?php
/******* 
 * 原理：Cookie 僅存字符串，將 URL 數組 serialize 後存儲，讀取時 unserialize 還原
 ******/

// 模擬當前頁面 URL（實際項目中直接用 $_SERVER['REQUEST_URI']）
$id = isset($_GET['id']) ? (int)$_GET['id'] : 1;
$currentUrl = "/php/?id=$id";

if (isset($_COOKIE['his'])) {
    // 讀取並還原歷史數組
    $urls = $_COOKIE['his'];
    $arr = @unserialize($urls);          // @ 抑制非法序列化警告
    $arr = is_array($arr) ? $arr : [];   // 容錯：非數組則重置
    
    // 添加當前 URL 並去重
    $arr[] = $currentUrl;
    $arr = array_unique($arr);
    
    // 限制最多 10 條，移除最舊
    if (count($arr) > 10) {
        array_shift($arr);
    }
    
    // 序列化存回 Cookie（有效期 30 天）
    $urls = serialize($arr);
    setcookie('his', $urls, time() + 30*86400, '/');
} else {
    // 首次訪問，初始化數組
    $arr = [$currentUrl];
    $urls = serialize($arr);
    setcookie('his', $urls, time() + 30*86400, '/');
}

// 輸出測試導航
echo "<a href='/php/?id=" . ($id-1) . "'>上一頁</a><br><br>";
echo "<a href='/php/?id=" . ($id+1) . "'>下一頁</a><br><br>";

// 顯示歷史記錄
echo "<h3>歷史訪問頁面</h3>";
echo "<ul>";
foreach ($arr as $v) {
    echo "<li><a href=\"$v\">$v</a></li>";
}
echo "</ul>";
?>

關鍵點深度解析

1. 序列化存儲策略

• serialize() / unserialize()：PHP 原生，支持多維數組，體積較 JSON 大約 30%
• 替代方案：json_encode() / json_decode()，跨語言兼容、體積小、可讀性強，推薦新項目使用

2. Cookie 設置最佳實踐

setcookie('his', $data, [
    'expires'  => time() + 30*86400,  // 30 天過期
    'path'     => '/',                // 全站可訪問
    'domain'   => '',                 // 當前域名（含子域需設置 .example.com）
    'secure'   => false,              // HTTPS 環境必須 true
    'httponly' => true,               // 防 XSS，JS 無法讀取
    'samesite' => 'Lax'               // CSRF 防護
]);

3. 安全與容錯處理

• 輸入驗證：$currentUrl 應通過 filter_var($url, FILTER_VALIDATE_URL) 或限制同域
• 反序列化風險：unserialize() 可能觸發對象注入，PHP 7+ 可用 unserialize($data, ['allowed_classes' => false]) 禁用對象
• 長度限制：單 Cookie 最大 4KB，10 條 URL 通常安全，超量需改用 LocalStorage + AJAX 同步

進階擴展：LocalStorage 版（突破 4KB 限制）

<script>
// 寫入
function saveHistory(url) {
    let arr = JSON.parse(localStorage.getItem('his') || '[]');
    arr = [...new Set([url, ...arr])].slice(0, 20); // 最多 20 條，去重
    localStorage.setItem('his', JSON.stringify(arr));
}

// 讀取並渲染
function renderHistory() {
    const arr = JSON.parse(localStorage.getItem('his') || '[]');
    document.getElementById('history').innerHTML = arr.map(v => 
        `
${v}
`
    ).join('');
}
</script>

前端方案無 Cookie 體積限制、不佔用 HTTP 頻寬、支持更豐富元數據（標題、停留時間、縮略圖），是現代化優選。

總結

Cookie 方案實現簡單、兼容性好，適合輕量級、無登錄、歷史條數少（<10）的場景。生產環境建議：

1. 優先使用 json_encode 替代 serialize
2. 設置 httponly、secure、samesite
3. 大數據量、跨域、富元數據場景遷移至 LocalStorage + 後端異步同步