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.
Course info
Rating
(138)
Level
Intermediate
Updated
Dec 3, 2013
Duration
5h 29m
Table of contents
Course Introduction
Web Storage
IndexedDB: Introduction and Concepts
IndexedDB: Initialization & CRUD
IndexedDB: Cursors, Indexes and Ranges
IndexedDB: Keys, Capacity, Performance and Versions
IndexedDB: Abstractions & Implementing an Edit Screen
File System: Introduction, Concepts & Initialization
File System: Directories - Create, List, Delete, Move & Copy
File System: Building an Abstraction Layer over Directories
File System: Files - Create, Read, Write, Delete, Move & Copy
File System: Testing Capacity Limits & Implementing a File Editor
Libraries
Description
Course info
Rating
(138)
Level
Intermediate
Updated
Dec 3, 2013
Duration
5h 29m
Description

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.

About the author
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
HTML5 Fundamentals
Beginner
3h 47m
3 Mar 2017
jQuery: Getting Started
Beginner
1h 40m
3 Jun 2015
More courses by Craig Shoemaker
Section Introduction Transcripts
Section Introduction Transcripts

Web Storage
Hello and welcome back to Pluralsight's HTML5 Web Storage, IndexedDB and File System. This is Craig Shoemaker and in this module you'll learn all about the HTML5 API called web storage. Just a recap where we're at in the course overall the web storage module is the second module in this course. And things are about to get interesting. So as we move on I have a question for you. What's in a name?

IndexedDB: Introduction and Concepts
Hello and welcome back Craig Shoemaker and in this module we'll begin the section of modules on indexedDB. Now there's a lot of good stuff to come, but if you started this course at this point welcome, but you may find some value in checking the concept clips at the course introduction which gets you up to speed on some of the patterns and techniques I'm using throughout this section of modules. Here you'll learn about the foundations of indexedDB including the event lifecycle, capacity, capabilities, browser support, fallbacks, polyfills, and more. Let's start by defining indexedDB.

IndexedDB: Initialization & CRUD
Welcome back to Pluralsight's HTML5 Web Storage, IndexedDB and File System. This is Craig Shoemaker. Now with the foundation set we can turn our attention to some of the basics of working with any database. And that's implementing CRUD operations, but before we do that let's take a look at what it takes to initialize an indexedDB database.

IndexedDB: Cursors, Indexes and Ranges
By now working with indexedDB should start to feel a little more comfortable. This is Craig Shoemaker and once again welcome back to Pluralsight's HTML5 Web Storage, indexedDB and File System. In this module you'll learn to work with sets of data as well as seeing how to perform searches and filter and sort results. So let's get started by discussing ways to simply code by modeling the database itself.

IndexedDB: Keys, Capacity, Performance and Versions
Welcome back to Pluralsight's HTML5 Web Storage, IndexedDB and File System. This is Craig Shoemaker and I'm glad you're here because in this module we'll discuss some strategies for uniquely identifying data, as well as its implications, and we'll push the limits a bit by taking a look at the capacity and the performance of databases with large amounts of data stored in the browser. Lastly, you'll learn to use the versioning system to help maintain different versions of your database as they evolve. Alright let's go ahead and get stared.

IndexedDB: Abstractions & Implementing an Edit Screen
In this module in HTML5 Web Storage, IndexedDB and File System, we'll begin to build an abstraction layer over the low-level IndexedDB API and use the resulting JavaScript module to implement a full read, list, edit, and delete screen. Congratulations, you've come along way and now you're in the last module in the section on IndexedDB.

File System: Introduction, Concepts & Initialization
Hello and welcome back to Pluralsight's HTML5 Web Storage, IndexedDB and File System. This is Craig Shoemaker, and in this module you'll soon be acquainted with the client-side file system available through HTML5. So here we are now at the third main section of the course. And if you're starting here I'm excited about what you're about to learn, but note that it may be a good idea to check out the Introductory module where I cover some overarching concepts that will serve you well as we continue on on the rest of the modules in this section. Alright, well let's begin by discussing the file system as a whole and see how you can initialize it for use.

File System: Directories - Create, List, Delete, Move & Copy
Thanks once again for joining me here in Pluralsight's HTML5 Web Storage, IndexedDB and File System. In this module, you'll begin to learn about creating and managing directories. By using the raw API, you'll learn to create individual directories, as well as subdirectory hierarchies, list contents of directories, and move, copy, and rename directories. So let's go ahead and get started with some demos.

File System: Building an Abstraction Layer over Directories
Thanks once again for joining me here in Pluralsight's HTML5 Web Storage, IndexedDB and File System. And in this module you'll learn to create an abstraction layer over the code needed to work with directories. By wrapping up the low-level operations which are required to work with directories, you're able to cleanup your code in significant ways and along with that make it easy to deal with common ways to handle errors and success conditions.

File System: Files - Create, Read, Write, Delete, Move & Copy
Hello again, I'm still Craig Shoemaker, and in this module you'll learn to work with files. Here we'll start picking up some speed so we'll work with both the low-level API, as well as abstractions together in this module. By the end of this module you'll have all you need to know to work with the file system as a whole. Alright let's go ahead and get started.

File System: Testing Capacity Limits & Implementing a File Editor
So here we are in the last module in the file system section of HTML5 Web Storage, indexedDB and File System. In this module we'll use the abstractions created in the previous modules to test the file system capacity and implement a file editor in the browser. This editor will take advantage of all the simplicity we built into the local file system JavaScript module, but before we do that let's take a look at how much data we can push into the file system.

Libraries
Well welcome to the final module in the course. Congratulations, you've come a long way. In our final time together, you'll get to see a few third-party libraries in action that can help illustrate important concepts in extending the browser reach of your client-side persistent applications. So let's start off by taking a look at store. js.