Content continuity UX

As a library grows, finding the same article again becomes harder. Search and categories help people discover something new. Recent history helps them return to something known. Neither replaces the other.

Start with the user flow

Discover in list → read detail → close browser → revisit list → continue recent article

Without the final arrow, the reader must remember a title or category and search again. Showing a path the site already knows removes that memory cost.

Store the minimum

For a public site without accounts, browser localStorage is enough. Keep only path, title, category, and visit time. Do not store the body or search queries.

type RecentItem = {
  path: string;
  title: string;
  category: string;
  visitedAt: number;
};

Opening the same article should move it to the front instead of duplicating it. Keeping only three to five items limits both storage and decision load.

The article must survive storage failure

Private browsing or storage limits can make localStorage reads and writes throw. History is an enhancement, so catch the failure and keep the article usable. Return an empty list during server rendering to avoid hydration drift.

Mobile layout

Place recent items above the main list without letting them take over the screen. On mobile, a horizontal snap row with a glimpse of the next card communicates that more items exist. Each card needs only a two-line title, category, date, and a clear “Keep reading” action. The same data can become a two- or three-column grid on larger screens.

Regression test

Automate the real sequence:

1. Open an article detail.
2. Return to the list.
3. Confirm that the same title appears in recent history.
4. Activate the card and confirm the original detail path.
5. On mobile, verify the touch area and horizontal overflow.

The key outcome is not storage itself. It is whether returning takes a single choice.