How do you store and retrieve a TypeScript object in localStorage?

What's really being asked

This question checks whether you know that the Web Storage API persists only strings and that you must handle serialization, deserialization, and TypeScript typing explicitly. It also surfaces whether you follow MDN guidance by using the official getItem and setItem methods rather than direct object access.

The full answer

First, serialization on write. You pass the object through JSON.stringify and store the resulting string with localStorage.setItem under a chosen key. Second, deserialization on read. You call localStorage.getItem, check for null because getItem returns null when the key is missing, then pass the string through JSON.parse to reconstruct the object. Third, TypeScript safety. After parsing, you cast or type the result using an interface such as User with id as number and name as string, or you use a type guard to verify the shape at runtime. Fourth, error handling. You wrap JSON.parse in a try-catch block because the stored value might be malformed, deleted by the user, or written by another version of the application.

The mistakes people make

A major red flag is assigning the object directly with localStorage.user = user, which triggers implicit toString conversion and stores object Object instead of structured data. Another mistake is calling JSON.parse without checking for null, which throws a runtime error when the key does not exist. Some candidates also forget to type the parsed result, leaving it as any and defeating TypeScript compile-time checks. Finally, using direct property access like localStorage.key instead of getItem and setItem is discouraged by MDN because it risks collisions with built-in methods and prototype pollution when handling untrusted keys.

What usually comes next

An interviewer might ask how you would handle storage quotas, which are typically around 5 to 10 MB per origin depending on the browser. They might also ask how to store non-serializable values like Dates, Maps, or functions, where JSON.stringify loses prototype information and you would need a custom reviver or replacer. Another follow-up is how to sync localStorage across tabs, which can be done by listening to the storage event on the window object.

A concrete example

Suppose you have a User object with id 123 and name Alex. On save, you write localStorage.setItem with key user and value JSON.stringify of the object. On load, you retrieve with localStorage.getItem, confirm the result is not null, parse it inside a try-catch, and assert the returned value matches your User interface. If parsing fails, you fall back to a default user or clear the corrupted entry.