Persistent Offline Storage White

JavaScript Persistence & Offline Storage Dec 9 2009 Alexei White (Foresee Results - Nitobi) http://ambiguiti.es @AlexeiRWhite

What is Persistence / Storage? ,[object Object],[object Object],[object Object],[object Object]

Why Persistent Storage? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Isn’t That What Cookies are For? ,[object Object],[object Object],[object Object],[object Object]

window.name ,[object Object],[object Object],[object Object],[object Object]

window.name ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flash Local Shared Object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flash Local Shared Object ,[object Object],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);

Flash Local Shared Object ,[object Object],<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>

Flash Local Shared Object ,[object Object],// Save $(‘storageMovie’).saveData(store,key,value); // Load var result = $(‘storageMovie’).loadData(store, key);

Flash Local Shared Object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Lowest Common Denominator ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],* When combined with GZIP.

Silverlight IsolatedStorage ,[object Object],[object Object],[object Object],[object Object],[object Object],http://www.shinedraw.com/data-handling/silverlight-vs-flash-local-storage/ System.IO.IsolatedStorage.IsolatedStorageFile

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("New Text"); streamWriter.Flush(); streamWriter.Close();

HTML5 Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML5 Features In Jeopardy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML5 Storage Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML5 DOM Storage ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML5 DOM Storage ,[object Object],[object Object],// 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]”

HTML5 DOM Storage ,[object Object],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

HTML5 DOM Storage ,[object Object],[object Object],[object Object],sessionStorage.clear(); for (var I = 0; I < sessionStorage.length; I++) { console.log(sessionStorage[sessionStorage.key(I)]); } sessionStorage.removeItem(“mykey”);

HTML5 WebDB ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML5 Database ,[object Object],[object Object],if (window.openDatabase) { // … } try { // DB operations go here } catch(e) { if (e == 2) { // Version mismatch } }

HTML5 Database ,[object Object],[object Object],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)

HTML5 Database ,[object Object],[object Object],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]); } }

HTML5 Database ,[object Object],db.transaction( function (transaction) { var query="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

HTML5 Database ,[object Object]

Alternatives to HTML5 WebDB ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],* Discontinued by Google

Persistent Offline Storage White

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Persistent Offline Storage White

Ähnlich wie Persistent Offline Storage White (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Persistent Offline Storage White

Hinweis der Redaktion