Making Your SPA Remember State with localStorage — 3 Patterns and Their Pitfalls

Making Your SPA Remember State with localStorage — 3 Patterns and Their Pitfalls In a vanilla JavaScript SPA without build tools, you want the page to return to "where you were" after a reload. React has zustand + persist, Vue has pinia-plugin-persistedstate, but without a framework you're writing raw localStorage calls. Running a home lab dashboard (single-file SPA, ~3000 lines), I use localStorage for three distinct purposes. Here are the patterns and the pitfalls I only discovered after implementing them. Pattern 1: Persisting View State The most common SPA annoyance — pressing F5 dumps you back to the home page. 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 " , function () { cons