WordPress 顯示「最近看過的文章」：用 localStorage 記錄瀏覽紀錄，不用存資料庫

add_action( 'wp_enqueue_scripts', 'ahwei_view_history_scripts' );

function ahwei_view_history_scripts() {
    wp_enqueue_script(
        'ahwei-view-history',
        get_stylesheet_directory_uri() . '/js/view-history.js',
        array(),
        '1.0',
        true // 放在頁面最後面載入
    );

    // 只有單篇文章頁才記錄
    if ( is_singular( 'post' ) ) {
        $post_id = get_queried_object_id();
        $data    = array(
            'id'    => $post_id,
            'title' => html_entity_decode( wp_strip_all_tags( get_the_title( $post_id ) ), ENT_QUOTES, 'UTF-8' ),
            'url'   => get_permalink( $post_id ),
        );
        wp_add_inline_script(
            'ahwei-view-history',
            'window.ahweiCurrentPost = ' . wp_json_encode( $data ) . ';',
            'before'
        );
    }
}

(function () {
  const KEY = 'ahwei_view_history';
  const LIMIT = 8; // 最多記錄幾篇

  function load() {
    try {
      const list = JSON.parse(localStorage.getItem(KEY) || '[]');
      return Array.isArray(list) ? list : [];
    } catch (e) {
      return [];
    }
  }

  function save(list) {
    try {
      localStorage.setItem(KEY, JSON.stringify(list));
    } catch (e) {
      // 無痕模式或瀏覽器封鎖儲存空間時,直接略過
    }
  }

  // 只接受自己網站的網址
  function isSameSite(url) {
    try {
      return new URL(url, location.href).origin === location.origin;
    } catch (e) {
      return false;
    }
  }

  let list = load().filter((item) => item && item.url && isSameSite(item.url));
  const current = window.ahweiCurrentPost;

  // 1. 在文章頁:把這篇移到最前面,超過上限的舊紀錄刪掉
  if (current && current.url) {
    list = list.filter((item) => item.id !== current.id);
    list.unshift({ id: current.id, title: current.title, url: current.url });
    list = list.slice(0, LIMIT);
    save(list);
  }

  // 2. 頁面上有 id="view-history" 的容器,就把清單放進去
  const wrap = document.getElementById('view-history');
  if (!wrap) {
    return;
  }

  // 不列出正在看的這一篇
  const items = list.filter((item) => !current || item.id !== current.id);
  if (items.length === 0) {
    wrap.style.display = 'none';
    return;
  }

  const ul = document.createElement('ul');
  items.forEach((item) => {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = item.url;
    a.textContent = item.title;
    li.appendChild(a);
    ul.appendChild(li);
  });
  wrap.appendChild(ul);
})();

<div id="view-history">
  <h3>最近看過的文章</h3>
</div>

#view-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#view-history a {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f1f1f1;
  color: #232323;
  text-decoration: none;
}

#view-history a:hover {
  background: #0099cb;
  color: #fff;
}