Q437: Implementation Drill Saved Snippets LocalStorage Recovery

What Interviewers Want To Evaluate

This drill tests whether you treat browser storage as untrusted input.

localStorage looks simple, but it can contain stale, malformed, or manually edited data.

If a learning tool crashes because one storage entry is bad, the persistence feature has harmed the workflow.

Senior frontend code recovers gracefully.

Short Interview Answer

I would wrap localStorage parsing in a defensive utility.

The utility should read a namespaced key, parse JSON safely, validate the store version, filter invalid snippet entries, and fall back to an empty list if data is unusable.

Writing should store a versioned shape so future migrations are possible.

The practice page should never crash because snippet storage is corrupted.

Why Recovery Matters

Browser storage can break because of:

manual DevTools edits
old app versions
partial writes
extension interference
quota issues
schema changes
invalid JSON

The user does not care why it broke.

They care that the page still opens.

The editor should remain usable even if saved snippets are lost.

Namespaced Key

Use a specific key:

learning-studio.practice-snippets.v1

This avoids collisions with:

snippets
data
saved
code

Specific keys also make support and debugging easier.

Versioned Store

Store:

type Store = {
  version: 1;
  snippets: SavedSnippet[];
};

Versioning matters because localStorage survives deployments.

When the schema changes later, the code has a path for migration instead of guessing.

Entry Validation

Each snippet should be checked for:

id string
language is javascript or typescript
title string
code string
createdAt string
updatedAt string

Invalid items can be filtered out.

One broken snippet should not destroy the whole list if the rest of the store is usable.

Write Failure

localStorage write can fail.

Reasons:

quota exceeded
storage disabled
private mode restrictions
browser policy

The UI should show a useful message:

Could not update saved snippets in this browser.

The user should not be left wondering why Save did nothing.

Recovery Strategy

Use:

try parse
validate version
validate array
filter invalid entries
catch failure
return empty list

This strategy is conservative.

It protects the page.

It does not attempt complex repair before the feature needs it.

Testing Plan

Verify manually:

empty localStorage loads empty list
valid store loads snippets
invalid JSON falls back to empty list
wrong version falls back to empty list
mixed valid and invalid snippets keeps valid snippets
write failure shows error if reproducible

Some of these can become unit tests later because the storage utilities are pure around a storage interface.

Common Mistakes

• Calling JSON.parse without try/catch.
• Trusting localStorage shape.
• Using a generic storage key.
• Crashing the practice page because snippet data is bad.
• Treating write failure as impossible.
• Adding migration complexity before a second schema exists.

Final Mental Model

localStorage recovery should be:

defensive
versioned
namespaced
non-crashing
quietly recoverable

Persistence should make the app more useful, not more fragile.