Web Storage APIs
Learning Paths:
Table of Contents
Introduction
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
State of Browser APIs
Maximiliano discusses APIs for browser data storage, including cookies, web storage, WebSQL, application cache, IndexedDB, file and directories, cache storage, and FileSystem Access. A student's question regarding if IndexedDB is backwards compatible is also covered in this segment.
Data Storage APIs Comparison
Maximiliano compares the type of content stored, key usage, grouping, and storage limits of the previously discussed data storage APIs.
Web Storage
Maximiliano discusses some of the fallbacks of Web Storage and offers replacement options. Web Storage's data persisting with localStorage and sessionStorage is also discussed in this segment.
Debugging Tools
Maximiliano demonstrates storage debugging tools, including Chrome, Firefox, and Safari dev tools. A student's question regarding how the quota for IndexedDB is decided is also covered in this segment.
Quotas & Persistence
Maximiliano discusses the properties of quotas and data persistence. There is one quota for all storages including the data from APIs service worker registrations and PWAs web app manifests.
Persistent Storage Request
Maximiliano demonstrates using an API to request permission or check the status of persistent storage in a browser. Firefox will ask the user and Chromium will grant or deny based on engagement with that origin among other criteria.
Web Storage
Coffee Masters Project Setup
Maximiliano walks through the contents of the course repository and the basic setup instructions.
Requesting Persistence Practice
Maximiliano live codes requesting persistence storage for the Coffee Masters application. The application immediately executes an async function that checks for persistence, and if not, it requests persistence. A student's question regarding why a false value may be returned while using Chrome is also covered in this segment.
Storage Estimate Practice
Maximiliano demonstrates asking quota for information on storage estimates with an async function. The quotas are estimates and will never give exact numbers.
Web Storage Practice
Maximiliano walks through using Web Storage to store a user's cart contents in local storage. When working with local storage, the data passing through must be converted into a string.
IndexedDB Storage
IndexedDB Overview
Maximiliano provides an overview of the event-based, NoSQL data store, IndexedDB and libraries that can be used on top of it. When storing objects, IndexedDB clones them, and cloning happens synchronously.
Using idb with IndexedDB
Maximiliano demonstrates creating and accessing a database with IndexedDB and improving the process by adding the idb promise-based wrapper. This segment covers database opening, creating, and deleting, keys for data stores, and quick transactions.
Replacing Web Storage with IndexedDB
Maximiliano walks through replacing the web storage implementation with IndexedDB. New versions of load and save are implemented in this segment.
Creating Menu Database Practice
Maximiliano discusses creating an index in IndexedDB and quick transactions from indexes. A practice exercise creating a database to make the menu available offline is also walked through in this segment.
Cache-First Load Practice
Maximiliano walks through refactoring the current load function into a cache-first load. A student's question regarding if there is an e-tag variant of cache invalidation for IndexedDB is also covered in this segment.
Cache-First vs Network-First Loading
Maximiliano walks through a network-first load function and compares it to the previously written cache-first load. Advanced IDB topics to look into are also discussed in this segment.
Cache Storage
Cache Storage Overview
Maximiliano discusses an overview of cache storage, including creating caches under a name, storing HTTP responses, and storing them under an HTTP request key. Common scenarios and serving resources are also covered in this segment.
Caching Images Practice
Maximiliano walks through implementing the Cache Storage API to store the product images. The images are stored client-side and, with persistent storage, will not have to be re-downloaded.
Service Worker API
Maximiliano briefly overviews a service worker and demonstrates implementing the Service Worker API. If the service worker is implemented in the scripts folder, the service worker's scope will be restricted to that folder.
Caching the App Shell Practice
Maximiliano demonstrates caching the application's shell to allow the app to run offline. Cross platform resources can also be stored using the service worker.
Serving Files with Network-First Policy
Maximiliano demonstrates refactoring the fetch request to first attempt to serve files network-first and then default to cache-first loading if the application is offline. The developer is in complete control of how to cache and serve the resources of the PWA and manage API calls.
FileSystem Storage
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
Database, Performance, & Serverless
Maximiliano discusses some best practices for database, performance, and provides some serverless ideas. Remember, it's better to store small objects, use Web Workers, and the ability to create custom indexes.
Data Sync & Security
Maximiliano discusses best data sync and security practices and provides options for where to continue to read and do more with browser data storage. Mastering service workers, thinking about data migration, and remembering browser storage is public are a few suggestions covered in this segment.
