JavaScript Persistence

1
JavaScript Persistence Offline Storage

• Dec 9 2009
• Alexei White (Foresee Results - Nitobi)
• http//ambiguiti.es
• _at_AlexeiRWhite

2
What is Persistence / Storage?

• Data locker that persists between page loads,
  and/or browser sessions.
• Client-side data storage vs Server-side storage.
• Browsers JavaScript engines typically do not
  have file I/O capabilities.
• Many reasons to want to keep data local.

3
Why Persistent Storage?

• Provide sandbox mode for online documents. (eg
  Word vs Google Docs)
• Persist trivial data like layout and preferences.
• Eliminate unnecessary server requests.
• Provide powerful data lookup capabilities (SQL)
  to JavaScript apps.
• Browser crash fail-safe / offline mode.
• Cacheing scripts.

4
Offline Storage Use Case
5
Isnt That What Cookies are For?

• Very limited storage capacity (4000 bytes per)
• Limited of cookies. (20 max per domain, 300
  cookies max overall)
• Sent to server on every request.
• Useful storage needs to be in 100k range
  contiguous.

6
The Flavors of JS Persistence
7
Storage Flavors
8
window.name

• Very old string property of the browsers window
  object.
• Used primarily for setting hyperlink targets.
• Persistent across pages and domains.
• Can be used before domready event.

9
window.name

• Combine with JSON lib or native code for reading
  and writing

// Write a structure to window.name var myObj
ahello world, b324234 window.name
JSON.stringify(myObj) // Read it back var
myObj try myObj JSON.parse(window.name)
catch(e)
10
window.name

• Completely insecure.
• Same Origin Policy does not apply.
• Data stored in plain text within the DOM.
• Can be read outside your website.
• Tends to degrade browser performance a bit.
• 2MB upper limit FF or starts to get slow.
• 4MB IE same.
• Not Crash-safe.
• Wont be restored even if tabs are restored after
  crash.
• Not written to disk.
• Great place to cache trivial data or communicate
  inter-app.

11
Flash Local Shared Object

• Key/Value pair storage object built into Flash
  player 6.
• Up to 100K free. Afterward, dialogue appears
  asking user for permission to save more.
• Supported by virtually all browsers via
  ExternalInterface
• IE5
• Netscape 8
• Firefox 1
• Safari 1.3
• Opera 9

12
Flash Local Shared Object

• Step 1 Create a new Flash movie

import flash.external.ExternalInterface //
Saves data to datastore function saveData(store,
key, value) sharedObject SharedObject.getLoca
l(store) sharedObject.datakey
value sharedObject.flush() // Retrieves
data function loadDate(store, key) return
SharedObject.getLocal(store).datakey Externa
lInterface.addCallback(saveData,
this.saveData) ExternalInterface.addCallback(loa
dData, this.loadData)
13
Flash Local Shared Object

• Step 2 Embed the movie (manually or via
  SwfObject)

ltobject classidbla codebasebla height1
width1 idstorageMoviegt ltparam namemovie
valuesharedobject.swf /gt ltparam
nameallowScriptAccess valuealways
/gt ltembed srcshredobject.swf
allowScriptAccessalways width1 height1
namestorageMovie /gt lt/objectgt
14
Flash Local Shared Object

• Step 3 Communicate via ExternalInterface

// Save (storageMovie).saveData(store,key,value
) // Load var result (storageMovie).loadDa
ta(store, key)
15
Flash Local Shared Object

• Gotchas
• Flash movie must be on visible portion of screen
  at least once before accessing via
  ExternalInterface.
• If its not working
• Check that the movie did load.
• Its on visible portion of screen.
• document.getElementById(movieId) returns an
  object.
• allowScriptAccess always

16
The Lowest Common Denominator

• Flash Local Shared Object
• ExternalInterface supported by all browsers.
• Provides persistent offline crash-safe support.
• Has wide adoption on web.
• Provides decent (100K) storage capacity.
• Not wiped when user clears browser cache.

When combined with GZIP.
17
Silverlight IsolatedStorage

• Silverlight has same functionality.
• More capacity (1024 KB vs 100 KB).
• Binary storage format
• Streamwriters / readers
• Compression

System.IO.IsolatedStorage.IsolatedStorageFile
http//www.shinedraw.com/data-handling/silverlight
-vs-flash-local-storage/
18
Silverlight IsolatedStorage
using System.IO.IsolatedStorage.IsolatedStorageFil
e IsolatedStorageFile store  IsolatedStorageF
ile.GetUserStoreForApplication()   
if(store.FileExists(FILENAME))       isfs  new 
IsolatedStorageFileStream(FILENAME, FileMode.OpenO
rCreate, store)       StreamReader streamReader 
 new StreamReader(isfs)       string s       whi
le ((s  streamReader.ReadLine()) ! null)        
   TextArea.Text  (s  '\n')       streamReader
.Close()        // save data to local storage   
IsolatedStorageFile store  IsolatedStorageFile.Ge
tUserStoreForApplication()   IsolatedStorageFileS
tream isfs  new IsolatedStorageFileStream(FILENAM
E, FileMode.OpenOrCreate, store)   StreamWriter s
treamWriter  new StreamWriter(isfs)   streamWrit
er.Write("New Text")   streamWriter.Flush()   st
reamWriter.Close()
http//www.shinedraw.com/data-handling/silverlight
-vs-flash-local-storage/
19
HTML5 Overview

• Next big update to HTML standard.
• AKA Web Applications 1.0.
• In Last Call state with WHATWG.
• Not necessarily the future of web.
• New stuff
• Canvas tag
• Rich media (video)
• Storage
• Doc editing
• Drag and Drop

• Cross-doc messaging
• History management
• MIME and protocol reg.

20
HTML5 Features In Jeopardy

• Canvas tag
• Microsoft has VML possibly SVG in IE9
• DOM WebDB (SQL based storage)
• No for IE (lots of reasons why)
• Probably not for Mozilla
• Media embedding
• No for IE
• Confusion over codecs (H.264 / Ogg Theora)
• Concern over Patent litigation.

21
HTML5 Storage Overview

• Two kinds of storage proposed
• Key/value pair (hash) storage
• Create expando properties on storage object.
• Similar to Shared Local Object in flash.
• WebDB (SQLite based)
• Create and populate databases right in the
  browser
• Perform SQL queries on the fly.
• Based on SQLite.

22
HTML5 DOM Storage

• Hash-based storage of strings (not objects).
• 10 MB per zone.
• Two kinds
• sessionStorage
• Die when browser closes
• Not shared between tabs
• localStorage
• Crash-safe
• Shared BW tabs / windows and sessions but not
  zones.

23
HTML5 DOM Storage

• Reading and writing
• Wont work

// Writing data sessionStorage.myKey
Hello window.sessionStoragemyKey
Hello window.localStorage.myKey
Hello localStoragemyKey Hello
sessionStorage.myObj atrue,
bfalse console.log(sessionStorage.myObj) //
Object object
24
HTML5 DOM Storage

• Events (onstorage, onstoragecommit)

function handleStorageEvent(e) // These
attributes only appear in Safari var str Key
e.key \n str Original Value
e.oldValue \n str New Value
e.newValue alert(str) // Bindings, IE then
W3C if (document.attachEvent) document.attachEven
t(onstorage, handleStorageEvent) else document
.body.addEventListener(storage,
handleStorageEvent)
IE8 only
25
HTML5 DOM Storage

• Clearing
• Iterating
• Deleting

sessionStorage.clear()
for (var I 0 I lt sessionStorage.length I)
console.log(sessionStoragesessionStorage.key(I
))
sessionStorage.removeItem(mykey)
26
HTML5 WebDB

• Will be supported in Safari 3.1, Opera 9.?,
  Chrome.
• Around 5MB per domain.
• Accessible across tabs and windows.
• Basic SQLite SQL language features and types
  supported.
• Schema versioning supported.
• Transactions supported.
• Tables must be created on first run.

27
HTML5 Database

• Detection
• Error trapping

if (window.openDatabase) //
try // DB operations go here catch(e) if
(e 2) // Version mismatch
28
HTML5 Database

• Simple DB Access
• Other parameters

var database openDatabase("Database Name",
"Database Version") database.executeSql("SELECT
FROM test", function(result1)    // do
something with the results   database.executeSql(
"DROP TABLE test", function(result2)      // do
some more stuff     alert("My second database
query finished executing!")   ))
openDatabase(shortName, version, displayName,
maxSize)
29
HTML5 Database

• Parameterized queries
• Transactions

transaction.executeSql(INSERT INTO products
(name, price) VALUES (?, ?), Book, 2.01)
myDB.transaction( function(transaction) //
Create the products table transaction.executeSQL
(CREATE TABLE products (id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL
DEFAULT Widget, price REAL NOT NULL DEFAULT
9.99), ) transaction.executeSql(INSERT
INTO products (name, price) VALUES (?, ?),
Book, 2.01)
30
HTML5 Database

• Selects

db.transaction( function (transaction)
var query"SELECT FROM products
transaction.executeSql(query, ,
handleProductsQuery, errorHandler) ,
transactionErrorCallback) function
handleProductsQuery(transaction, resultSet)
for (var I 0 I lt resultSet.length I)
var row resultSet.rows.item(i) console.lo
g(rowname rowprice)
http//developer.apple.com/safari/library/document
ation/iPhone/Conceptual/SafariJSDatabaseGuide/Usin
gtheJavascriptDatabase/UsingtheJavascriptDatabase.
html//apple_ref/doc/uid/TP40007256-CH3-SW1
31
HTML5 Database

• Safari DB Inspector

32
Alternatives to HTML5 WebDB

• TrimQuery - http//code.google.com/p/trimpath/wiki
  /TrimQuery
• CouchDB
• Apache-project for RESTful JSON-based data
  queries.
• Can solve the backend/frontend interop problem by
  being available to both via HTTP requests.
• Google Gears SQLite DB. Same Interface.
• Hash-based data storage using DOM storage or
  other mechanism.

Discontinued by Google
33
Questions?

• Slide deck at http//ambiguiti.es