Client-side storage

Client-side Storage

The Little Book Of (Mostly) Everything

Friday, April 26, 13

About me

Ruben Tan

VPE of OnApp CDN KL

Aspiring Javascript Samurai

@roguejs

http://roguejs.com

https://github.com/soggie


http://roguejs.com

http://roguejs.com



CATS!!!!!


About me


About me

Worked with Java 6+ years


About me


Adopted node.js, redis & CouchDB


About me



Huge fan of Javascript & related technologies


About me




Organizer of NodeHack


About me





Dabbled in 0MQ and various messaging techs


About me





Dabbled in 0MQ and various messaging techs

Working on a auto-devenv provisioner with vagrant and puppet


HTTP & Browser State

COOKIES:

HTTP by nature is stateless

1994 - web cookies created (in Netscape) for e-commerce (carts)

Cookies became de-facto browser-side store

Inefficient because cookies are included in every request


HTTP & Browser State

Cookies inefficient and insecure

Sessions stored on server side became standard

Then HTML5 came along...


Case Studies


Case Studies

Synchronizing data across tabs


Case Studies


Reduce server load by minimizing polling


Case Studies



Historic immutable data (analytics, history, etc)


Case Studies




Simplify data sync between frontend & backend


Case Studies





Persisting form data in complex forms


Case Studies





Persisting form data in complex forms

etc


Example:

Server

Tab 1 Tab 2

Poll Poll


Example:

Server

Tab 1 Tab 2

Update Push


Example:

Server

Tab 1 Tab 2

Update

Update

Store

Read/Auto

SERVER

BROWSER


Client-side Overview

Web Storage

Web SQL Database

Indexed Database

File Access


Web Storage

http://dev.w3.org/html5/webstorage/

Protocol to store data in browser across tabs

Improvement on cookies

Comes in two flavors:

localStorage - forever

sessionStorage - until end of browser session

No support for transactions




Web Storage Support


Web SQL Database

Bringing SQL to client-side storage, based on sqlite

Developers love it

Browser makers hated it

W3C abandoned it in November 2010


Web SQL Support


Indexed Database

Proposed by Oracle in 2009

Web Storage on steroids

Assumes data stored is an object, with an index

Allows queries via the indices


Indexed Database Support


File API

Let’s you save files in the browser


File Access Support


Limitations of Client Storage



Cookies = 4kb each



Cookies = 4kb each

localStorage = 2.5 ~ 5MB average



Cookies = 4kb each


IndexedDB = up to 20% of available space



Cookies = 4kb each


IndexedDB = up to 20% of available space

FileAPI = same as IndexedDB


Moar Limitations!!


Moar Limitations!!

Data-types to store:


Moar Limitations!!


Cookie: STRING


Moar Limitations!!


Cookie: STRING

Web Storage: STRING


Moar Limitations!!


Cookie: STRING

Web Storage: STRING

Indexed Database: JS OBJECT


Moar Limitations!!


Cookie: STRING

Web Storage: STRING

Indexed Database: JS OBJECT

File: BINARY


Moving on...

Browsers and W3C sees the need for client-side storage

Web Store + IndexedDB + File API = an almost complete solution

Where does this leave us?


The Emerging Scene

Google Gears (sadly, is dead)

Synckit

Store.js

Garlic.js - form persistence

PouchDB (based on CouchDB) - auto-sync with couchDB

jQuery plugins

db.js

LocalStorageDB

Lawnchair

ydn-db - unifying indexedDB, webSQL and webStorage


Client-side Storage Challenges



Limited amount of resources




Must be as lightweight as possible





Focuses more on querying of data vs. storage mechanism






Security, consistency, performance






Security, consistency, performance

Javascript. Duuuddeeeee....


What can we do?


What can we do?

Observe the scene (PouchDB & ydn-db)


What can we do?


Incorporate into major frameworks (backbone, ember, angular, KO, etc)


What can we do?



Simplify and standardize API


What can we do?



Simplify and standardize API

Understanding the power of client-side offloading


That’s all folks!


Client-side storage

Technology

Transcript of Client-side storage