Web Storage APIs
Table of Contents
IntroductionMaximiliano 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 StorageMaximiliano 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.
OriginMaximiliano 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 APIsMaximiliano 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 ComparisonMaximiliano compares the type of content stored, key usage, grouping, and storage limits of the previously discussed data storage APIs.
Web StorageMaximiliano 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 ToolsMaximiliano 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 & PersistenceMaximiliano 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 RequestMaximiliano 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.
Coffee Masters Project SetupMaximiliano walks through the contents of the course repository and the basic setup instructions.
Requesting Persistence PracticeMaximiliano 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 PracticeMaximiliano demonstrates asking quota for information on storage estimates with an async function. The quotas are estimates and will never give exact numbers.
Web Storage PracticeMaximiliano 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 OverviewMaximiliano 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 IndexedDBMaximiliano 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 IndexedDBMaximiliano walks through replacing the web storage implementation with IndexedDB. New versions of load and save are implemented in this segment.
Creating Menu Database PracticeMaximiliano 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 PracticeMaximiliano 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 LoadingMaximiliano 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 OverviewMaximiliano 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 PracticeMaximiliano 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 APIMaximiliano 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 PracticeMaximiliano 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 PolicyMaximiliano 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 Access APIMaximiliano 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 PracticeMaximiliano 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 PracticeMaximiliano 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.
Database, Performance, & ServerlessMaximiliano 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 & SecurityMaximiliano 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.