Web API Cookbook

Chapter 2. Simple Persistence with the Web Storage API

Introduction

The Web Storage API persists simple data locally, in the user’s browser. You can retrieve this data later, even after closing and reopening the browser.

This API has a Storage interface that provides data access and persistence. You don’t create instances of Storage directly; there are two global instances: window.localStorage and window.sessionStorage. The only difference between these is how long they retain the data.

sessionStorage data is associated with a specific browser session. It retains the data if the page is reloaded, but closing the browser completely loses the data. Different tabs for the same origin do not share the same persisted data.

On the other hand, localStorage shares the same storage space across all tabs and sessions for the same origin. The browser retains this data even after you close the browser. In general, session storage is a good choice if you want to store something ephemeral or sensitive that you want to be destroyed once the browser is closed.

In both cases, storage space is specific to a given origin.

What Is an Origin?

A page’s origin is a string combining the protocol (http or https), host, and port of a URL. For example, the URLs https://example.com/path/to/index.html and https://example.com/profile/index.html both have the same origin: https://example.com.

Getting and Setting Items

Web Storage can only store string values. Each value has a key that you can use to look ...