Persistent Offline Storage White
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Persistent Offline Storage White

on

  • 4,235 views

 

Statistics

Views

Total Views
4,235
Views on SlideShare
4,141
Embed Views
94

Actions

Likes
2
Downloads
35
Comments
3

4 Embeds 94

http://ambiguiti.es 75
http://www.slideshare.net 13
http://blogdetestedoalex.blogspot.com 5
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • that gzip idea is awesome.. fits in very well if you have to deal with flash based storage anyway. damn, why didn't i think earlier. thanks for sharing.. :-)
    Are you sure you want to
    Your message goes here
    Processing…
  • Hey Sumit,
    1. Here is an example of gzipping on the browser side: http://ambiguiti.es/2008/01/compression-in-javascript-not-of-javascript/
    2. Window.name is not domain specific. You are not bound by the same-origin-policy when reading and writing to it. However, you cannot read and write to it from different windows.
    3. Window.name does persist yes. this is covered in the slde deck.
    Are you sure you want to
    Your message goes here
    Processing…
  • few comments/questions:
    1. how do you use gzip on the browser side? know of any utility script that can do gzip/gunzip on client side?
    2. window.name is domain specific. meaning if a window with name 'foo' loads contents from domainA, you could still open another window with name 'foo' from a window loaded with content from domainB
    3. window.name persists for multiple page load/navigations on the same window
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Historically, most desktop apps have this idea that when you open a document or database or any data-driven application, you have a certain amount of freedom to interact with that data without necessarily affecting the version that is saved on the disk. So if I change the font of my entire word doc to comic-sans just for fun to see what it looks like, I don’t need to worry about that change being permenant because I didn’t save it. Generally speaking, web apps don’t provide this ‘sandbox’ mode because it’s a major development effort to distinguish between data modifications that are sandboxed and ones that are permanent. And because the browser itself is for the most part not at all stateful or aware of the data you are working with – you have to provide that functionality on your own. Talk briefly about how you have used/needed persistent storage.
  • Byte limits.. Your cookies need to be encoded as well, as though you were embedding them in XML attributes which bumps up the size. Overloading your cookies has been known to crash browsers too.
  • The only thing not on this list is anything provided by Silverlight or possibly a Java Applet – but I know very little about these. Gears – no support for Safari 4 yet on snow leopard. Built right into chrome. Talk about window.name interesting features. How perf drops on FF around 2 mb. Data can be accessed off domain, etc. HTML5 Sqlite storage limits don’t appear to be enforced yet. Opera 3MB http://blog.futtta.be/2009/11/18/chrome-opera-to-support-html5-webdb-ff-ie-wont/ I should point out that Adobe AIR’s javascript interface is a bit of a different ball game. They have their own storage IO mechanisms, and support SQLite as well. ALSO: GOOGLE GEARS has been discontinued by google.
  • Can be read and written to outside its origin. Not crash safe, but extremely useful.
  • Can be read and written to outside its origin
  • Despite these negatives, sometimes there’s really no better way to do something
  • Despite these negatives, sometimes there’s really no better way to do something
  • Can be read and written to outside its origin
  • Can be read and written to outside its origin
  • Byte limits.. Your cookies need to be encoded as well, as though you were embedding them in XML attributes which bumps up the size. Overloading your cookies has been known to crash browsers too. In flash 9+ you can combine this with GZIP which is built right into the engine to really stretch this. With user permission you can increase this to massive amounts.
  • http://www.shinedraw.com/data-handling/silverlight-vs-flash-local-storage/
  • http://www.shinedraw.com/data-handling/silverlight-vs-flash-local-storage/
  • Web Hypertext Application Technology Working Group The WHATWG was founded by individuals from Apple , the Mozilla Foundation and Opera Software . [1] Since then, the editor of the WHATWG specifications, Ian Hickson , has moved to Google . Chris Wilson of Microsoft was invited but did not join, citing the lack of a patent policy to ensure all specifications can be implemented on a royalty-free basis Limited involvement from Microsoft. Not all vendors will implement all features.
  • http://blog.futtta.be/2009/11/18/chrome-opera-to-support-html5-webdb-ff-ie-wont/ - in order to have a webdb standard, you also have to specify (and standardize) the SQL-language to query that database, the question is what SQL-dialect to standardize on. - as the current implementations are all SQLite -based (including Google’s and Opera’s), the spec would have to describe the very specific SQL-dialect that SQLite uses (and maybe even of a specific version of SQLite) - http://blog.vlad1.com/2009/04/06/html5-web-storage-and-sql/ Enjoinment IE USED TO HAVE INLINE VIDEO AND AUDIO embedding: http://sharovatov.wordpress.com/2009/06/05/html5-video-tag-and-internet-explorer/
  • There’s this other thing called globalStorage provided by FF which has been deprecated to my knowledge.
  • There’s this other thing called globalStorage provided by FF which has been deprecated to my knowledge.
  • DIFFERENCE IS: onstorage fires on both storage formats, but onstoragecommit only should fire on localstorage ALSO: onstoragecommit is ONLY for ie8 There’s this other thing called globalStorage provided by FF which has been deprecated to my knowledge. Can also use the JSON library here to support objects. For events: In FF and safari the event args are actually the storage event object. In IE you get an event object, and in safari you can an expanded object with additional properties. HTML5 origin (scheme + hostname + non-standard port)
  • http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1 A database transaction comprises a unit of work performed within a database management system (or similar system) against a database, and treated in a coherent and reliable way independent of other transactions. Transactions in a database environment have two main purposes: To provide reliable units of work that allow correct recovery from failures and keep a database consistent even in cases of system failure, when execution stops (completely or partially) and many operations upon a database remain uncompleted, with unclear status. To provide isolation between programs accessing a database concurrently. Without isolation the programs' outcomes are typically erroneous.
  • http://blog.futtta.be/2009/11/18/chrome-opera-to-support-html5-webdb-ff-ie-wont/ - in order to have a webdb standard, you also have to specify (and standardize) the SQL-language to query that database, the question is what SQL-dialect to standardize on. - as the current implementations are all SQLite -based (including Google’s and Opera’s), the spec would have to describe the very specific SQL-dialect that SQLite uses (and maybe even of a specific version of SQLite) - http://blog.vlad1.com/2009/04/06/html5-web-storage-and-sql/ - enjoinment

Persistent Offline Storage White Presentation Transcript

  • 1. JavaScript Persistence & Offline Storage Dec 9 2009 Alexei White (Foresee Results - Nitobi) http://ambiguiti.es @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. Isn’t 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 browser’s 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 = { “a”:”hello world”, “b”:324234 }; 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.getLocal(store); sharedObject.data[key] = value; sharedObject.flush(); } // Retrieves data function loadDate(store, key) { return SharedObject.getLocal(store).data[key]; } ExternalInterface.addCallback(“saveData”, this.saveData); ExternalInterface.addCallback(“loadData”, this.loadData);
  • 13. Flash Local Shared Object
    • Step 2: Embed the movie (manually or via SwfObject)
    <object classid=“bla” codebase=“bla” height=“1” width=“1” id=“storageMovie”> <param name=“movie” value=“sharedobject.swf” /> <param name=“allowScriptAccess” value=“always” /> <embed src=“shredobject.swf” allowScriptAccess=“always” width=“1” height=“1” name=“storageMovie” /> </object>
  • 14. Flash Local Shared Object
    • Step 3: Communicate via ExternalInterface
    // Save $(‘storageMovie’).saveData(store,key,value); // Load var result = $(‘storageMovie’).loadData(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 it’s not working:
        • Check that the movie did load.
        • It’s 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
    http://www.shinedraw.com/data-handling/silverlight-vs-flash-local-storage/ System.IO.IsolatedStorage.IsolatedStorageFile
  • 18. Silverlight IsolatedStorage http://www.shinedraw.com/data-handling/silverlight-vs-flash-local-storage/ using System.IO.IsolatedStorage.IsolatedStorageFile; IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication();    if(store.FileExists(FILENAME)){        isfs = new IsolatedStorageFileStream(FILENAME, FileMode.OpenOrCreate, store);        StreamReader streamReader = new StreamReader(isfs);        string s;        while ((s = streamReader.ReadLine()) != null)            TextArea.Text += (s + ' ');        streamReader.Close();    }      // save data to local storage    IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication();    IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(FILENAME, FileMode.OpenOrCreate, store);    StreamWriter streamWriter = new StreamWriter(isfs);    streamWriter.Write(&quot;New Text&quot;);    streamWriter.Flush();    streamWriter.Close();
  • 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:
    • Won’t work:
    // Writing data sessionStorage.myKey = “Hello”; window.sessionStorage[“myKey”] = “Hello”; window.localStorage.myKey = “Hello”; localStorage[“myKey”] = “Hello”; sessionStorage.myObj = {a:true, b:false}; 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 + “ ”; str += “Original Value: “ + e.oldValue + “ ”; str += “New Value: “ + e.newValue; alert(str); } // Bindings, IE then W3C if (document.attachEvent) document.attachEvent(“onstorage”, handleStorageEvent); else document.body.addEventListener(“storage”, handleStorageEvent); *IE8 only
  • 25. HTML5 DOM Storage
    • Clearing:
    • Iterating:
    • Deleting:
    sessionStorage.clear(); for (var I = 0; I < sessionStorage.length; I++) { console.log(sessionStorage[sessionStorage.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(&quot;Database Name&quot;, &quot;Database Version&quot;); database.executeSql(&quot;SELECT * FROM test&quot;, function(result1) {    // do something with the results    database.executeSql(&quot;DROP TABLE test&quot;, function(result2) {      // do some more stuff      alert(&quot;My second database query finished executing!&quot;);    }); }); 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=&quot;SELECT * FROM products”; transaction.executeSql(query, [], handleProductsQuery, errorHandler); }, transactionErrorCallback); function handleProductsQuery(transaction, resultSet) { for (var I = 0; I < resultSet.length; I++) { var row = resultSet.rows.item(i); console.log(row[‘name’] + “: “ + row[‘price’]); } } http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/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