JSON  

Chapter 17: JSON Data and Local Storage for Client-Side Persistence

In real-world applications, data needs to be retrieved from servers and often saved in the browser so that it persists even after the user closes and reopens the page. This chapter covers JSON (the universal data format) and the primary browser storage mechanism: Local Storage.

1. Understanding JSON (JavaScript Object Notation)

JSON is a lightweight data-interchange format. It is completely language-independent, but its structure is directly based on JavaScript objects, making it the standard format for web data (APIs).

Key JSON Rules

  • Keys (property names) must be double-quoted.

  • Values can be strings (double-quoted), numbers, booleans, arrays, objects, or null.

  • Functions and dates are not natively supported in JSON.

JavaScript vs. JSON

JavaScriptJSON
{ name: 'Alice' }{ "name": "Alice" } (Keys must be quoted)
[1, 2, 3][1, 2, 3]
undefinedNot supported (use null instead)

Export to Sheets

2. The JSON Object: Parsing and Stringifying

The global JSON object in JavaScript has two crucial static methods for working with JSON data:

  1. JSON.stringify(jsValue): Converts a JavaScript value (like an object or array) into a JSON string. This is essential for sending data to a server or storing it in Local Storage.

  2. JSON.parse(jsonString): Converts a JSON string back into a usable JavaScript object or array. This is essential for receiving data from a server or retrieving it from Local Storage.

JavaScript

const userData = {
    id: 1,
    name: 'Jane',
    isAdmin: true
};

// 1. Convert JS Object to JSON Stringconst jsonString = JSON.stringify(userData);
console.log(jsonString); // Output: '{"id":1,"name":"Jane","isAdmin":true}'

// 2. Convert JSON String back to JS Objectconst restoredData = JSON.parse(jsonString);
console.log(restoredData.name); // Output: Jane

3. Local Storage

Local Storage allows websites to store large amounts of data (up to 5-10MB) permanently in the user's browser, persisting across sessions (even after the browser is closed).

Key Local Storage Methods

Local Storage only stores strings, which is why JSON.stringify() is necessary before saving objects.

MethodDescription
localStorage.setItem(key, value)Stores a key/value pair. Both must be strings.
localStorage.getItem(key)Retrieves the string value associated with the key.
localStorage.removeItem(key)Removes the key/value pair.
localStorage.clear()Clears all data for the current domain.

Export to Sheets

Saving an Object to Local Storage

JavaScript

const settings = { theme: 'dark', notifications: true };

// 1. Stringify the JS Objectconst settingsJSON = JSON.stringify(settings);

// 2. Save the stringlocalStorage.setItem('userSettings', settingsJSON);
console.log('Settings saved.');

Retrieving an Object from Local Storage

JavaScript

// 1. Retrieve the stringconst savedSettingsString = localStorage.getItem('userSettings');

let userSettings = {};

if (savedSettingsString) {
    // 2. Parse the string back into a JS Object
    userSettings = JSON.parse(savedSettingsString);
} else {
    console.log('No settings found in local storage.');
}

console.log('Current theme:', userSettings.theme); // Output: Current theme: dark

Membership not found