Session storage is a web storage API that allows you to store data on the client-side browser. It provides a way to store key-value pairs, similar to a dictionary or object. However, by default, session storage can only store string values.

In this article, we’ll explore how to store and retrieve objects in session storage by serializing and deserializing them using JSON.

Serializing Objects using JSON.stringify()

To store an object in session storage, we need to convert it into a string representation. We can achieve this by using the JSON.stringify() method, which converts a JavaScript object into a JSON string.

Here’s an example:

const user = {
  name: "John Doe",
  age: 25,
  email: "john.doe@example.com"
};

const serializedUser = JSON.stringify(user);
sessionStorage.setItem("user", serializedUser);

In the example above, we first define an object user with properties such as name, age, and email. We then use JSON.stringify() to convert the user object into a JSON string and store it in session storage using the setItem() method.

Deserializing Objects using JSON.parse()

To retrieve the object from session storage, we reverse the process by converting the JSON string back into a JavaScript object. We can use the JSON.parse() method to achieve this.

Here’s an example:

const serializedUser = sessionStorage.getItem("user");
const user = JSON.parse(serializedUser);
console.log(user.name); // Output: John Doe
console.log(user.age); // Output: 25
console.log(user.email); // Output: john.doe@example.com

In the example above, we retrieve the JSON string from session storage using the getItem() method and store it in the serializedUser variable. We then use JSON.parse() to convert the JSON string back into a JavaScript object. Finally, we can access the properties of the user object as we would with any JavaScript object.

Conclusion

Storing and retrieving objects in session storage allows us to persist complex data structures on the client-side. By serializing the objects to JSON strings, we can easily store and retrieve them using session storage’s key-value pair storage mechanism. This technique is useful for saving user data or other temporary information during a user’s session on a website.

#webdevelopment #sessions