HTML5 Web Storage, IndexedDB and File System
Learn to use Web Storage (local and session storage), IndexedDB and the in-browser file system. Beyond the basics of the API you'll also learn to wrap up the raw APIs and use them in context of a web application.
What you'll learn
Learn to use HTML5 to persist data on the client using Web Storage (local and session storage), the client-side object database known as IndexedDB and the in-browser file system. In this course you are introduced to each persistence medium and will learn to abstract away the complexities of using the raw APIs. Discussion of each technology also includes a "real-life" sample to demonstrate how you can use capabilities shown in this course in context of an application scenario.
Table of contents
- Introduction 1m
- What's in a Name? 2m
- What is Web Storage? 1m
- Capacity 2m
- Testing Capacity 1m
- Features 2m
- Browser Support 1m
- Fallbacks and Polyfills 1m
- Caveats 3m
- Demo: Getting and Setting Values 4m
- Demo: Remove Item 1m
- Demo: Keys and Length 2m
- Demo: Clear 1m
- Demo: Session Storage 2m
- Demo: Exceed Quota 1m
- Demo: Storage Event 2m
- Demo: Persistent Form Demonstration 2m
- Demo: HTML Markup 3m
- Demo: localDataService JavaScript Module 4m
- Demo: viewModel JavaScript Module 6m
- Demo: Stepping Through the Code 5m
- Summary 1m
- Introduction 0m
- Demo: Introduction to the Homes List Screen 2m
- Demo: Homes List Markup 4m
- Demo: Homes List db Model 5m
- Demo: Abstracting IndexedDB - Error Handling 4m
- Demo: Abstracting IndexedDB - Delete and Open Database 5m
- Demo: Abstracting IndexedDB - Get All 4m
- Demo: Abstracting IndexedDB - Insert, Update and Delete 7m
- Demo: Homes List View Model 8m
- Demo: Stepping Through the Code 6m
- Summary 1m
- Introduction 1m
- What is the HTML5 File System? 0m
- Features 1m
- Capacity 1m
- Browser Support 1m
- Fallbacks and Polyfills 1m
- Caveats 2m
- Storage Types 1m
- Demo: Initialization (Temporary Storage) 6m
- Demo: Initialization (Permanent Storage) 3m
- Demo: Wrapping Up Initialization Code 3m
- HTML5 File System Explorer (Chrome Extension) 1m
- Summary 0m
- Introduction 0m
- Demo: localFileSystem Module - Error Handling 5m
- Demo: localFileSystem Module - Request File System 4m
- Demo: localFileSystem Module - Create Directory 9m
- Demo: localFileSystem Module - Directory Exists 2m
- Demo: localFileSystem Module - Get Directory Entries 1m
- Demo: localFileSystem Module - Delete 2m
- Demo: localFileSystem Module - Move, Rename and Copy 4m
- Summary 0m
- Introduction 0m
- Demo: Create and Get File 2m
- Demo: Read, Write and Update File 5m
- Demo: Delete, Move, Rename and Copy File 3m
- Demo: File Abstractions Overview 1m
- Demo: localFileSystem Module - Create File 4m
- Demo: localFileSystem Module - Get and File Exists 2m
- Demo: localFileSystem Module - Read, Prepend and Append 4m
- Demo: localFileSystem Module - Delete and Replace File 2m
- Demo: localFileSystem Module - Move, Rename and Copy File 3m
- Summary 0m
About the author
Craig Shoemaker is a Senior Content Developer for Microsoft on the Azure Container Apps and Azure Static Web Apps teams. On some days he's building internal tools to keep Microsoft employees productive, and others days creating guidance used by hundreds of thousands of developers. Additionally, Craig is a best selling Pluralsight author and co-host of the Web Rush podcast. You can reach Craig on Twitter at @craigshoemaker or join the conversation at Web Rush https://webrush.io.