HTML5 Texas JavaScript Workshop – Client-Side Storage

Web technologies have taken a long time to progress.

A lot of the standards we see today are because browsers decided to implement new features.

HTML5 is now just supposed to be HTML. It is supposed to be a living standard.

Pamela needs an HTML app that helps choose her hair color.

Client-Side Storage

• cookies
• Flash Storage
• Internet Explorer UserData
• Google Gears
• Dojo Storage
• window.name

Cookies are used for all types of tracking, but they have issues with security, user trust (can be disabled), performance and size.

In the HTML spec, they considered the issues and came up with the following solutions.

• Web Storage APIs
• IndexedDB
• File System APIs
• Application Cache
• …cookies

localStorage

• Key / value pairs – hash table
• Persistent on page reloads
• Avoids HTTP overhead of cookies
• Great for storing user preferences (domain-specific, but it doesn’t matter where the script comes from)

sessionStorage

Same as localStorage but…

• Lasts as long as browser is open (session-based)
• Opening page in new window or tab starts new session
• Great for sensitive data (e.g. banking sessions)

Why use a library for localStorage?

• Support check
• Serialization
• Fallbacks
• Specific use cases (Forms, expiration, etc)
• Browser quirks (modern browser quirks, especially with mobile browsers)

localStorage libraries include store.js or lscache (presenter’s library).

Dangers of using localStorage are that localStorage access is synchronous and

• JSON.parse/JSON.stringify takes CPU time

Recommendations:

• Don’t serialize unnecessarily
• Don’t use excessive keys
• Don’t do excessive gets/sets
• Don’t block the UI

Make sure to test for slow points BEFORE you start trying to improve performance. Time your site in target browsers and find the slow points - Blog post: Measuring performance in PhoneGap, Blog post: Performance Profiling in JavaScript, JS Performance Analysis Tools. jsperf allows you to run tests and see the results of other people’s tests.

Don’t serialize unnecessarily

• Do use strings where possible - jsperf: Primitives vs. Strings jsperf: Optional use of JSON stringify

Don’t use excessive keys

• Do combine keys commonly accessed together - jsperf: 1 long key vs. multiple short keys

Don’t do excessive gets/sets

• Do cache data in local memory or the DOM, and only get/set on window load/unload - Exercise Explorer: Caching in local memory, Hearty Extension: Caching in the DOM

Don’t block the UI

• Do defer using localStorage until onload - Not Blocking the UI in Tight JS Loops
• Do use setTimeout to defer localStorage access - Nicholas Zakas: Responsive Interfaces
• Do throttle or debounce to avoid repetitive gets/sets - Blog Post: 2 LocalStorage Tips, jQuery Throttle/Debounce Plugin

WORSE: A dysfunctional site

• Don’t assume localStorage works or will always work.
• Don’t use key names that collide.

IndexedDB

window.indexedDB

• Object based data store
• In-order retrieval by index or key
• Asynchronous or synchronous API

This is going to be the standard, so it’s worth learning. Read more: Indexed DB spec, MDN: Using IndexedDB

IndexedDB: Why use a library?

• Not the simplest API.
• Many fundamental differences across browser versions.
• Not supported in all browsers, fallbacks needed.

Storage library: Lawnchair

• Includes serialization, fallbacks (window.name, userData, gears, indexedDB)
• Optional plugins for aggregation, pagination, and queries.

Other IndexedDB Libraries

• IndexedDB Polyfill: Falls back to WebSQL.
• persistence.js: Falls back to localStorage, memory, mySQL on Node, AppEngine
• YDN-DB: Falls back to localStorage, webSQL.

File APIs

There are many File APIs.

• Reading and manipulating:
  File / Blob, FileList, FileReader
  http://dev.w3.org/2006/webapi/FileAPI/
  FileList & FileReader - See: MDN: Using files from web apps
• Creating and writing:
  BlobBuilder, FileWriter, FileSaver
  http://dev.w3.org/2009/dap/file-system/file-writer.html
  FileWriter - HTML5 Rocks: Exploring the file system API
• Directories and System:
  FileSystem
  http://dev.w3.org/2009/dap/file-system/pub/FileSystem/

Probably going away or are going to change because IndexDB can do the same things.

SIDE NOTE: Marquee is coming back in CSS.

Which to Use?

Client-side Storage Comparison

• What kind of data can you store?
• How much data can you store? (WebStore support test, Chrome Quota Management API)
• How can you query data? (IndexedDB: Using an Index)
• How well does it perform? (LocalStorage read performance, localStorage performance)
• What browsers does it work in? (caniuse.com: Web Storage, IndexedDB, FileSystem, Mozilla on File Systems API)

Use Cases

• Remember user data
• Retain application state
• Remember form input
• Improve performance
• Help the app work offline

Client-side Storage Course Elements

• Slides
• Exercise: localStorage
• Exercise: IndexedDB

Related articles

• Who Needs MySQL When There Is IndexedDB?
• Basket.js: A JavaScript Loader With LocalStorage-based Script Caching
• HTML5 and JavaScript Web Apps

What people are looking for when they find this page: Jonathan Jeter, angularjs indexeddb, contact interface expert jonathan, html5 expert advice, html5 webstore hash table, html5tx 2013 client side storage, UI to test datastorage API of html5, ydn-db et api