Persisting SPA State with localStorage — 3 Patterns and Their Pitfalls

When you're building a vanilla JavaScript SPA without any build tools, you'll inevitably face this question: how do I get the app to "remember" where the user was after a page reload? With React you'd reach for zustand + persist, with Vue there's pinia-plugin-persistedstate — but in a framework-free setup, you're on your own with localStorage. I've been running a homelab dashboard (a single-file SPA, roughly 3,000 lines) and ended up using localStorage for three distinct purposes. Here are the patterns I settled on, along with the gotchas I only discovered after shipping. Pattern 1: Persisting View State The most common SPA annoyance — hit F5 and you're dumped back to the home screen. function showView(viewName) { document.querySelectorAll(".view").forEach(v => v.classList.remove("active")); document.getElementById(viewName + "View").classList.add("active"); // Save the current view localStorage.setItem('dashboardCurrentView', viewName); } document.addEventListener("DOMContentLoaded