Storing Objects in Web Storage: The JSON Step

Why it exists

Browsers provide Web Storage (localStorage and sessionStorage) to save data across page loads or even browser sessions. However, this API is very basic. It was designed to store only strings for both its keys and values, which is insufficient for modern applications that need to persist structured data like configuration objects or arrays of items.

The mental model

Think of localStorage as a filing cabinet where every folder label and every document inside must be plain text. If you have a complex, structured report (a JavaScript object), you can't just place it inside. You must first run it through a 'textifier' (JSON.stringify) to convert it into a simple string. When you retrieve it later, you must use a 're-hydrator' (JSON.parse) to turn it back into a usable report.

How it works

The process involves two key JavaScript methods. First, to save an object, you serialize it into a JSON string using JSON.stringify(). Then you save that string to storage with localStorage.setItem('key', stringValue). For example: const settings = { theme: 'dark' }; localStorage.setItem('userSettings', JSON.stringify(settings));. To read it back, you reverse the process. You retrieve the string with localStorage.getItem('userSettings') and then parse it back into a JavaScript object with JSON.parse(). Without this second step, you'd just have a string that looks like an object.

When to use it

This pattern is ideal for storing non-sensitive, structured data. Common use cases include saving user interface preferences (like a theme choice), caching API responses to reduce network requests on subsequent visits, or storing the state of a multi-step form in sessionStorage in case the user accidentally refreshes the page.

When not to use it

Do not use Web Storage for sensitive data like authentication tokens, passwords, or personal information. It is accessible to any JavaScript running on the page, making it vulnerable to cross-site scripting (XSS) attacks. For larger, more complex datasets or when you need transactional guarantees, a more powerful browser database like IndexedDB is a better choice.

One canonical example

To save a user's selected theme: const userPrefs = { theme: 'dark', fontSize: 16 }; localStorage.setItem('preferences', JSON.stringify(userPrefs));. On the next page load, you would retrieve and apply it: const savedPrefsString = localStorage.getItem('preferences'); if (savedPrefsString) { const userPrefs = JSON.parse(savedPrefsString); document.body.className = userPrefs.theme; }. This ensures the theme persists between visits.