← Back to Blog

Your longitudinal SEO dashboard was already in localStorage — I just drew it

Your longitudinal SEO dashboard was already in localStorage — I just drew it

When I added localStorage history to Mega SEO Analyzer v2 a week ago, I knew the data was accumulating. What I hadn't built yet was the view that turns a row in localStorage into a line on a graph.

Meet the SEO Trend Dashboard. It reads the same localStorage key the analyzer writes to, groups runs by URL, and renders per-URL score-over-time charts with trend classification. Zero setup if you've already run Mega SEO Analyzer. One-click import if you want to pull history from another device.

What it shows

Open the dashboard and you get:

Summary row — Number of URLs tracked, total runs, how many are improving / regressing / stable / new.

Per-URL cards, sorted worst-trend-first, each with:

  • Latest score + first-run score + run count
  • A 30-point SVG line chart showing score-over-time (last 30 runs, oldest on the left)
  • Trend classification badge: Improving (+8), Regressing (-12), Stable (+1), or New
  • Color-coded background bands on the chart (green = 75-100, amber = 50-74, red = 0-49)
  • Quick actions: "Re-run audit" (deep-links to Mega SEO Analyzer with the URL pre-filled) and "Delete history"

The dashboard is deliberately read-mostly. It doesn't create data; it renders what's already there.

The data model — same localStorage key as Mega SEO Analyzer v2

localStorage['jw-mseo-history'] = {
  "https://example.com/": [
    { ts: 1745270400000, overall: 78, dims: [...] },
    { ts: 1745184000000, overall: 73, dims: [...] },
    ...
  ],
  "https://example.com/pricing": [ ... ]
}

Every Mega SEO Analyzer run with history enabled adds one entry. Every Scheduled Monitor check adds one entry. The Dashboard reads the key and draws.

The three tools — analyzer, monitor, dashboard — are intentionally decoupled. Each does one thing. They communicate only via the shared storage key. If you stop using any of them, the others still work.

Trend classification, in plain English

The dashboard classifies each URL based on latest score vs first-recorded score:

  • Improving = delta ≥ +5 points
  • Regressing = delta ≤ -5 points
  • Stable = delta within ±5 points
  • New = only one run recorded (not enough to trend)

Regressing URLs sort to the top. That's the actionable list.

Why line charts in SVG instead of Chart.js or D3

I could have pulled in Chart.js (~60 KB minified + gzip) or D3 (heavier). Instead I wrote ~40 lines of vanilla SVG that draws:

  • A filled area path (amber-tinted)
  • A line path over the top
  • One circle per data point with a native <title> tooltip showing date + score
  • Three background bands showing the 0-49 / 50-74 / 75-100 score zones

This costs ~0 KB extra weight and renders instantly. For the data volume we have (typically 5-50 runs per URL), a full charting library is overkill.

Export, import, share across devices

localStorage is per-browser-per-origin. Your Chrome-on-laptop history doesn't automatically appear in Firefox-on-desktop or on your phone. For cross-device continuity:

  • Export JSON — dashboard button writes the entire history to a downloadable jw-mseo-history-2026-04-22.json file
  • Import JSON — upload the file on another browser; dashboard replaces local history with imported data (confirmation required)

If you want always-on cross-device sync, store the JSON in a cloud drive (Dropbox, iCloud Drive, OneDrive), download before running, re-upload after. Crude but works.

For a real multi-device monitoring service, the upgrade path is a server endpoint — I describe it in the Scheduled Monitor post.

How to use it

  1. Go to /tools/seo-trend-dashboard/
  2. If you've already run Mega SEO Analyzer v2 with "Save to localStorage history" checked, your URLs appear. Each one with 2+ runs gets a chart.
  3. If you haven't, run the Mega SEO Analyzer now with history enabled, then refresh this dashboard.
  4. Or run the Scheduled Monitor — its checks populate the same store.
  5. Click Re-run audit on any card to open the analyzer with that URL pre-filled and auto-running.

The read-mostly pattern

This tool deliberately avoids side effects beyond manual user actions (clear all, delete per-URL, import JSON). I want it to be safe to open — looking at your history shouldn't risk changing it.

That's actually a pattern I want to keep using across all future dashboards: audit tools write, dashboard tools read. Keep the two roles separate.

Pair with the rest of the stack

Related reading

Fact-check notes and sources

  • localStorage spec: MDN Web Storage API. 5-10 MB per-origin quota; persistent across sessions.
  • SVG <path> and <circle> rendering: native in every browser since IE9.
  • Line chart math: linear scale of ts to x-axis, overall/100 to y-axis. No external library.
  • ContentKing / Sitebulb longitudinal pricing: ContentKing Plans, Sitebulb Pricing as of 2026-04.

This post is informational, not engineering or SEO-consulting advice. Mentions of ContentKing, Sitebulb, Chart.js, D3, and similar products are nominative fair use. No affiliation is implied.

← Back to Blog

Accessibility Options

Text Size
High Contrast
Reduce Motion
Reading Guide
Link Highlighting
Accessibility Statement

J.A. Watte is committed to ensuring digital accessibility for people with disabilities. This site conforms to WCAG 2.1 and 2.2 Level AA guidelines.

Measures Taken

  • Semantic HTML with proper heading hierarchy
  • ARIA labels and roles for interactive components
  • Color contrast ratios meeting WCAG AA (4.5:1)
  • Full keyboard navigation support
  • Skip navigation link
  • Visible focus indicators (3:1 contrast)
  • 44px minimum touch/click targets
  • Dark/light theme with system preference detection
  • Responsive design for all devices
  • Reduced motion support (CSS + toggle)
  • Text size customization (14px–20px)
  • Print stylesheet

Feedback

Contact: jwatte.com/contact

Full Accessibility StatementPrivacy Policy

Last updated: April 2026