How To Store Objects In Html5 Local Storage?

Ethan D. -

Problem: Storing Objects in HTML5 Local Storage

Local Storage in HTML5 lets websites save data in a user's browser. It only supports storing strings, which makes it hard to save complex data structures like objects. This issue needs a solution for storing and retrieving objects in Local Storage.

Solution: Using JSON to Store Objects in Local Storage

Converting Objects to Strings

To store objects in Local Storage, you can use JSON.stringify(). This method turns JavaScript objects into JSON strings. After conversion, you can store the string in Local Storage.

For example:

const myObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(myObject);
localStorage.setItem("user", jsonString);

Tip: Handle Circular References

When using JSON.stringify(), be aware of circular references in your objects. These can cause errors. To avoid this, you can use a custom replacer function:

const replacer = (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (cache.includes(value)) return '[Circular]';
    cache.push(value);
  }
  return value;
};

const cache = [];
const jsonString = JSON.stringify(myObject, replacer);
localStorage.setItem("user", jsonString);

Retrieving and Parsing Stored Objects

To get the stored object, use JSON.parse(). This method changes the stored JSON string back into a JavaScript object. This process restores the object structure and properties.

Here's how you can get the object:

const storedJsonString = localStorage.getItem("user");
const retrievedObject = JSON.parse(storedJsonString);
console.log(retrievedObject.name); // Output: John
console.log(retrievedObject.age);  // Output: 30

Step-by-Step Guide to Object Storage in Local Storage

Preparing the Object for Storage

To store an object in Local Storage, create your JavaScript object. Then, use JSON.stringify() to convert it to a string. Here's an example:

const userObject = {
  name: "Alice",
  age: 28,
  hobbies: ["reading", "swimming"]
};

const userString = JSON.stringify(userObject);

Tip: Handling Complex Objects

When dealing with complex objects that contain functions or circular references, consider using a custom replacer function with JSON.stringify() to handle these cases appropriately.

Storing the Object in Local Storage

After preparing the object, use localStorage.setItem() to store it. This method takes two arguments: a key (a string to identify the data) and the stringified object. For example:

localStorage.setItem("user", userString);

Retrieving the Object from Local Storage

To get the stored object, use localStorage.getItem() with the key you used to store the data. This returns the stored string. Then, use JSON.parse() to convert the string back to an object. Here's how:

const storedUserString = localStorage.getItem("user");
const retrievedUserObject = JSON.parse(storedUserString);

console.log(retrievedUserObject.name);  // Output: Alice
console.log(retrievedUserObject.hobbies[0]);  // Output: reading