Web Storage APIs

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
4 hours, 8 minutes CC
Web Storage APIs

Course Description

Build faster websites and add offline capabilities using the latest web storage APIs! Go beyond localStorage to use newer and more performant APIs like IndexedDB for storing JSON, CacheStorage for caching requests, and the FileSystem API for accessing the local file system. Learn the "state of the world" for client-side storage, quotas, and persistence in every browser!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: February 23, 2023

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 23 minutes
  • Introduction
    Maximiliano Firtman introduces the course by providing some personal and professional background. An overview of the course material and prerequisites are also covered in this segment.
  • Why Browser Data Storage
    Maximiliano discusses the benefits of browser storage, including increasing user experience, improving performance, offline support, and storing multiple types of valuable data. An overview of how browser storage works and its limitations is also provided in this segment.
  • Origin
    Maximiliano provides a brief overview of essential core concepts of browser storage, including origin, web client, device, and user. An origin is an internet domain composed of the protocol, host, and port.

APIs for Browser Data Storage

Section Duration: 52 minutes

Web Storage

Section Duration: 28 minutes

IndexedDB Storage

Section Duration: 56 minutes

Cache Storage

Section Duration: 43 minutes

FileSystem Storage

Section Duration: 31 minutes
  • FileSystem Access API
    Maximiliano discusses properties of the FileSystem Access API, including reading and writing files in the filesystem of the user's device, requiring user's permission, Chromium and desktop only, asynchronous API, and doesn't count towards the quota. Opening a file and writing to an opened file are also covered in this segment.
  • Export Cart Data Practice
    Maximiliano walks through setting up the base for importing and exporting the data for the cart's contents. A walk through of exporting the cart data and setting file type options are also covered in this segment.
  • Import Cart Data Practice
    Maximiliano walks through implementing the import function to allow importing cart data from the user's file storage. When a new cart is imported, the order has to be re-rendered.

Best Practices

Section Duration: 9 minutes

Wrapping Up

Section Duration: 3 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now