diff --git a/articles/webstorage.html b/articles/webstorage.html new file mode 100644 index 0000000..57dc570 --- /dev/null +++ b/articles/webstorage.html @@ -0,0 +1,72 @@ +
+
+
+

Web Storage

+
+ Web Storage is SUPER AWESOME +

Things you should know

+

How to detect WebStorage

+

Here is some example code to detect if you have LocalStorage support

+ 
+function checkLocalStoreageSupport () {
+    if (localStorage) {
+        return "Local Storage: Supported";
+    } else {
+        return "Local Storage: Unsupported";  
+    }
+}
+
+ +

Setting and getting values from WebStorage

+

Here is some example code to set and get values from Local Storage. Values can be any string INCLUDING JSON!!!

+ 
+//Set the value of a key
+localStorage.lastname="Smith";
+localStorage["lastname"] ="Smith";
+localStorage.setItem("lastname", "Smith");
+
+//Get the value of a key
+var lastname = localStorage.lastname;
+var lastname = localStorage["lastname"]
+var lastname = localStorage.getItem("lastname")
+
+//Storing an object
+localStorage.setItem('user', JSON.stringify({user: 'john', id: 10}));
+var user = JSON.parse(localStorage.getItem('user'));
+
+ +

WebStorage vs other offline storage

+

WebStorage is a simple key value store in the browser which is supported across all new browsers. For a more powerful database, Web SQL is used which is an implementation of sqlite right in the browser, however cannot be used with Firefox and Internet explorer. Chrome, Firefox and Internet Explorer also support IndexedDB, another local storage database.

+ +

Using LocalStorage with older browser or multiplatform

+

One approach is to use a polyfill library to backport the localStorage interface. One example would be Store.js

+

Another approach would be to use a multiplatform library that has a new interface on top of multiple sotrage platforms. Some examples could be:

+ +
+ +

Resources

+ + +

Examples

+ + + + + +
+ diff --git a/examples/CanvasExample.html b/examples/CanvasExample.html new file mode 100644 index 0000000..33a9317 --- /dev/null +++ b/examples/CanvasExample.html @@ -0,0 +1,40 @@ + + + + + + + + \ No newline at end of file diff --git a/examples/DBstorage/core.js b/examples/DBstorage/core.js new file mode 100644 index 0000000..436dba9 --- /dev/null +++ b/examples/DBstorage/core.js @@ -0,0 +1,147 @@ +$(function($){ + var TestDB; + var currentID=0; + initDatabase(); + + updateRestore(); + + // Button and link actions + $('#btnSave').click(function(){ saveCurrent(); return false;}); + $('#btnDel').click(function(){ delCurrent(); return false;}); + $('#btnRun').click(function(){ runCode(currentID); return false;}); + $('#restore').change(function(){restoreTo($(this).find('option:selected').val()); }); + + + function runCode(id){ + //$('#canvasFrame').attr('src', function ( i, val ) { return 'iframe.html?id='+currentID; }); + window.open('iframe.html?id='+currentID, "Run","status=0,toolbar=0,width=600px,height=600px"); + } + + function initDatabase() { + try { + if (!window.openDatabase) { + alert('Local Databases are not supported by your browser. Please use a Webkit browser for this demo'); + } else { + var shortName = 'TestDB'; + var version = '1.0'; + var displayName = 'TestDB'; + var maxSize = 100000; // in bytes + TestDB = openDatabase(shortName, version, displayName, maxSize); + createTables(); + updateRestore(); + } + } catch(e) { + if (e == 2) { + // Version mismatch. + console.log("Invalid database version."); + } else { + console.log("Unknown error "+ e +"."); + } + return; + } + } + + function updateRestore(){ + TestDB.transaction( + function (transaction) { + transaction.executeSql("SELECT id FROM codeFarm;", [], function(transaction, results){ + $('#restore option').remove(); + $('#restore').append(''); + for (var i=0; i'+id+''); + }else{ + $('#restore').append(''); + } + } + }); + } + ); + } + + function restoreTo(id){ + if(id==0){ + $('#editor').val(''); + currentID=0; + console.log('restore to 0'); + }else{ + TestDB.transaction( + function (transaction) { + transaction.executeSql("SELECT code FROM codeFarm where id = ?;", [id], function(transaction, results){ + var row = results.rows.item(0); + var code = row.code; + $('#editor').val(code); + currentID=id; + console.log('restore to '+id+' with '+code); + }); + } + ); + } + } + + function createTables(){ + TestDB.transaction( + function (transaction) { + transaction.executeSql( + 'CREATE TABLE IF NOT EXISTS codeFarm('+ + 'id INTEGER NOT NULL PRIMARY KEY, '+ + 'code TEXT NOT NULL'+ + ');', [], function(){ + console.log("done."); + }, function(){ + console.log("query count errot."); + }); + } + ); + } + + function saveCurrent(){ + TestDB.transaction( + function (transaction) { + var code = $('#editor').val(); + + console.log('about to save to:'+currentID+' with '+code); + if(currentID==0){ + var newid=0; + transaction.executeSql("SELECT id FROM codeFarm;", [], function(transaction, results){ + for (var i=0; i=newid){ + newid = parseInt(row.id); + } + } + newid = newid+1; + + transaction.executeSql("INSERT INTO codeFarm(id, code) VALUES (?, ?)", [newid,code]); + currentID = newid; + updateRestore(); + }, function(){ + transaction.executeSql("INSERT INTO codeFarm(id, code) VALUES (?, ?)", [newid,code]); + currentID = newid; + updateRestore(); + }); + + }else{ + console.log('update:'+currentID+' with '+code); + transaction.executeSql("UPDATE codeFarm SET code = ? WHERE id = ?", [code, currentID]); + } + } + ); + } + function delCurrent(){ + TestDB.transaction( + function (transaction) { + if(currentID!=0){ + transaction.executeSql("Delete from codeFarm where id = ?", [currentID]); + currentID=0; + $('#editor').val(''); + updateRestore(); + }else{ + $('#editor').val(''); + } + }); + } +}); \ No newline at end of file diff --git a/examples/DBstorage/iframe.html b/examples/DBstorage/iframe.html new file mode 100644 index 0000000..91b14c9 --- /dev/null +++ b/examples/DBstorage/iframe.html @@ -0,0 +1,51 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/examples/DBstorage/index.html b/examples/DBstorage/index.html new file mode 100644 index 0000000..1ecae5d --- /dev/null +++ b/examples/DBstorage/index.html @@ -0,0 +1,84 @@ + + + + DB storage by Ben Huang + + + + + + +
+
+
+ Save + Delete Current + Run +
+
+
+
+
+ +
+ + 
+			var c=document.getElementById("myCanvas");
+			var ctx=c.getContext("2d");
+			ctx.fillStyle="#FF0000";
+			ctx.fillRect(0,0,75,75);
+			for(i=0;i<1000;i++) {
+				addBox(ctx);
+			};
+	
+		function addBox(ctx)	{	
+			var height=Math.floor(Math.random()*100);
+			var width=Math.floor(Math.random()*100);
+			var left=Math.floor(Math.random()*(600-width));
+			var top=Math.floor(Math.random()*(600-height));
+			
+			ctx.fillStyle=get_random_color();
+			ctx.fillRect(left,top,width,height);
+		};
+		
+		function get_random_color() {
+		    var letters = '0123456789ABCDEF'.split('');
+		    var color = '#';
+		    for (var i = 0; i < 6; i++ ) {
+		        color += letters[Math.round(Math.random() * 15)];
+		    }
+		    return color;
+		};
+
+ + \ No newline at end of file diff --git a/examples/LocalStorageCanvas.html b/examples/LocalStorageCanvas.html new file mode 100644 index 0000000..c87d344 --- /dev/null +++ b/examples/LocalStorageCanvas.html @@ -0,0 +1,247 @@ + + + + + + + + + +HTML5 Canvas localStorage + + + + + + + + +
+ + + +

+ + +

+ + +
+ +
+ +

 

+ +

 

+ +

 

+

 

+ + + +
+ + + + + + diff --git a/examples/localStorage JSON Example.htm b/examples/localStorage JSON Example.htm new file mode 100644 index 0000000..21ecc0a --- /dev/null +++ b/examples/localStorage JSON Example.htm @@ -0,0 +1,70 @@ + + + + HTML5 Hackathon - localStorage JSON example + + + + + +

Content

+ Firstname:
+ Lastname:
+ Job
+ Email
+ + +
+
+
+
+ Storage content +
+
+
+
+ + + + diff --git a/examples/localStorage.html b/examples/localStorage.html new file mode 100644 index 0000000..6c436d5 --- /dev/null +++ b/examples/localStorage.html @@ -0,0 +1,117 @@ + + + + + HTML5/Web/DOM LStorage Demonstrated + + + + + +

HTML5 LStorage

+ +
+ + + + + + + + + +
Does this browser support local storage?
Number of Stored Elements
+ + + + + + + + + + + +
Enter Data:
+ +
+ + + +
+
+ + +