JavaScript · Intermediate level

Intermediate level · Module 4 of 6 · 13 guided hours

Browser Storage and Robust Forms

Persist data in the browser with Web Storage and IndexedDB, and build forms that validate input accessibly.

Learning objectives

  • Store and retrieve data with localStorage and sessionStorage
  • Validate forms with the Constraint Validation API and custom rules
  • Choose IndexedDB for larger or structured offline data

Topics

  • localStorage and sessionStorage
  • storing JSON safely
  • Constraint Validation API
  • accessible error messages
  • IndexedDB basics
  • privacy of stored data

Lessons

  1. Lesson 1 localStorage and sessionStorage

    Save data in the browser so it survives reloads, store objects as JSON and guard against missing or corrupted data.

    localStorage vs sessionStoragesetItem / getItemJSON in storagestorage limits and privacy

  2. Lesson 2 Accessible Form Validation

    Validate forms with HTML attributes and the Constraint Validation API, add custom rules and present errors accessibly.

    required, min, patterncheckValidity and setCustomValidityaria-describedbyfocus management

  3. Lesson 3 IndexedDB for Larger Offline Data

    Know when Web Storage is not enough and store larger, structured data in IndexedDB.

    IndexedDBobject storetransactionswrapper libraries

Practical activity

Make the budget app remember entries across reloads, validate its forms with clear messages and handle corrupted stored data.

Expected outcomes

  • Data that survives reloads
  • Forms that are hard to misuse and easy to correct

Assessment

Practical: add persistence and validation to a provided app; tested by reloading, clearing storage and submitting invalid data.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.