Working with Session Storage

1. Introduction

What is Session Storage?

Session Storage is a web storage object which stores data for one session. The data is deleted when the user closes the specific browser tab. It's a part of the Web Storage API, and allows you to store data on a user's web browser similar to cookies, but it's faster and much easier to work with.

Goals

In this tutorial, you will learn how to manage data that only needs to be stored temporarily. You'll learn how to use Session Storage to store, retrieve, and delete data.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript.

2. Step-by-Step Guide

Concept: Session Storage

Session Storage stores data as a key-value pair, and it can only store strings. To store objects, you will need to convert them to strings using JSON.stringify. Similarly, to retrieve objects, you will need to parse the string back into an object using JSON.parse.

Best Practices

• Avoid storing sensitive user information in session storage as it's accessible through JavaScript and can be exploited.
• Use session storage for non-sensitive data that needs to be maintained during page refreshes within a tab.

3. Code Examples

Example 1: Storing and Retrieving data from Session Storage

// Store data
sessionStorage.setItem('name', 'John');

// Retrieve data
let name = sessionStorage.getItem('name');

console.log(name); // Outputs: John

In the above code:
- setItem method is used to store data. It accepts two parameters - key and value.
- getItem method is used to retrieve data. It accepts one parameter - key.
- console.log is used to print the output to the console.

Example 2: Storing and Retrieving Objects from Session Storage

// Store object
let user = {name: 'John', age: 30};
sessionStorage.setItem('user', JSON.stringify(user));

// Retrieve object
let retrievedUser = JSON.parse(sessionStorage.getItem('user'));

console.log(retrievedUser); // Outputs: {name: 'John', age: 30}

In the above code:
- JSON.stringify is used to convert the object into a string before storing.
- JSON.parse is used to parse the string back into an object.

Example 3: Deleting data from Session Storage

// Remove specific data
sessionStorage.removeItem('name');

// Clear all data
sessionStorage.clear();

In the above code:
- removeItem method is used to remove data. It accepts one parameter - key.
- clear method is used to clear all data from session storage.

4. Summary

In this tutorial, we covered what session storage is, and how to store, retrieve, and delete data from it. As next steps, you might want to explore the other part of the Web Storage API - Local Storage, which is similar to Session Storage but persists even when the browser is closed.

5. Practice Exercises

Exercise 1

Store your favorite movie and its release year in session storage. Retrieve and print it to the console.

Exercise 2

Store an array of your favorite books in session storage. Retrieve and print them to the console.

Exercise 3

Store a list of your favorite songs with their artists in session storage as an object. Retrieve and print them to the console.

Solutions and explanations for these exercises can be found online, but it's recommended to try solving them on your own first. Happy coding!