1. Introduction

This tutorial is designed to help you understand how to store complex data structures like arrays and objects in Local and Session Storage. In JavaScript, only strings can be stored in Local and Session Storage. Therefore, we'll cover how to convert these complex data types into strings for storage, and then convert them back to their original form when we need to use them.

By the end of this tutorial, you will be able to:

• Understand what is local and session storage
• Store complex data structures in local and session storage
• Retrieve and use stored data

Prerequisites: Basic understanding of JavaScript, including data types, arrays and objects.

2. Step-by-Step Guide

Local and Session Storage are part of the Web Storage API. They provide a way to store key-value pairs in a web browser. The main difference between them is that Local Storage data has no expiration time, while Session Storage data gets cleared when the page session ends.

Storing Complex Data Structures

Since Local and Session Storage can only store strings, we need to convert our complex data structures into strings. This can be done using the JSON.stringify() method.

Retrieving Stored Data

To retrieve our data, we use the JSON.parse() method to convert our data back into its original form.

3. Code Examples

Example 1: Storing an array

let fruits = ["apple", "banana", "cherry"];
//convert the array into a string
let fruitsString = JSON.stringify(fruits);
//store it in local storage
localStorage.setItem("fruits", fruitsString);

In the code above, we first define an array of fruits. We then convert this array into a string using JSON.stringify(). Finally, we store this string in Local Storage using localStorage.setItem().

Example 2: Retrieving an array

//get the string from local storage
let fruitsString = localStorage.getItem("fruits");
//convert it back into an array
let fruits = JSON.parse(fruitsString);
console.log(fruits); // ["apple", "banana", "cherry"]

Here, we retrieve the stored string from Local Storage using localStorage.getItem(). We then convert this string back into an array using JSON.parse().

4. Summary

In this tutorial, we learned how to store complex data structures in Local and Session Storage. We did this by converting our data into strings using JSON.stringify() before storing, and converting them back into their original form using JSON.parse() after retrieving.

For further study, consider exploring how to handle errors when using JSON.parse() and JSON.stringify(), and how to check if a particular key exists in storage.

5. Practice Exercises

1. Store an object in Local Storage, retrieve it, and log it to the console.

2. Create a shopping cart array with items as objects. Each item should have a name and price. Store the shopping cart array in Session Storage.

Solutions:

let user = {name: "John", age: 30};
let userString = JSON.stringify(user);
localStorage.setItem("user", userString);

let retrievedUserString = localStorage.getItem("user");
let retrievedUser = JSON.parse(retrievedUserString);
console.log(retrievedUser); // {name: "John", age: 30}

let cart = [
  {name: "apple", price: 1},
  {name: "banana", price: 2},
  {name: "cherry", price: 3}
];
let cartString = JSON.stringify(cart);
sessionStorage.setItem("cart", cartString);

Remember, practice is key to mastering these concepts. Keep experimenting with different types of data structures.