Data Serialization & Persistence

So far, we have discussed data living in the RAM. But RAM is volatile; when we close the browser, the Heap is erased. To save data or send it to a server, we face a physical problem.

A. The Problem: Heap Structure

We cannot send a Heap Object over a network cable.

• An Object is a scattered collection of memory addresses and pointers.
• Pointers are meaningless outside the specific process that created them.

B. The Solution: Serialization

Serialization is the process of converting a complex Tree/Graph Structure (the Object) into a Linear String that can be stored or transmitted.

• Serialization : Object to String.
• Deserialization : String to Object.

JSON (JavaScript Object Notation)

JSON is the universal standard for serialization in the web. It is language-independent (Python, Java, and C++ all read JSON).

A. The Syntax Rules

JSON looks like a JS Object, but it has strict architectural constraints to ensure it is parsable by any language.

1. Keys must be Strings: Enclosed in double quotes "key".
2. No Functions: Logic cannot be serialized, only data.
3. No Circular References: We cannot serialize an object that points to itself (it would create an infinite string).
4. Data Types: limited to Strings, Numbers, Booleans, Null, Arrays, and Objects. undefined is not valid JSON.

B. The Engine Mechanisms

1. JSON.stringify(data)

   • Action: Traverses the Heap object and builds a string.
   • Key Removal (Data Loss): If a value is a Functionor undefined, the engine ignores the entire key-value pair,it is removed from the string.
   • Date Transformation: It converts Date objects into ISO Strings (e.g., "2025-12-19T...").
   • The Consequence: Once converted to a string, it is no longer an object. We lose all Date methods like .getFullYear() or .setHours().

2. JSON.parse(string)

   • Action: Reads a string and allocates New Memory Slots in the Heap to reconstruct the object.
   • Result: The new object is a Deep Copy of the original data.

Persistence (LocalStorage)

The browser provides a simple database called localStorage to save data across page reloads.

A. Architecture: String-Only Store

LocalStorage is effectively a giant Map that lives on the User's Hard Disk (not RAM).

• Constraint: It can ONLY store Strings.
• The Trap: If we try localStorage.setItem('user', obj), the engine implicitly calls .toString() on our object, saving the useless string "[object Object]".

B. The Pattern

To store Objects, we must manually Serialize and Deserialize.

const user = { id: 1, name: "Singh" };
 
// 1. Write (Serialize)
// RAM Object -> JSON String -> Disk
localStorage.setItem("user", JSON.stringify(user));
 
// 2. Read (Deserialize)
// Disk -> JSON String -> RAM Object
const storedData = JSON.parse(localStorage.getItem("user"));

C. Performance Cost (Blocking)

LocalStorage is Synchronous.

• When we read/write large chunks of JSON, the Main Thread freezes until the disk operation is complete.
• Best Practice: Only store small configuration data (auth tokens, theme preference). Never store massive datasets here; use IndexedDB for that.

📝 Summary Table