Using of HTML5 storages, WEB SQL DB and IndexedDB

1. Локальные хранилища

2. История: MicroSoft Internet Explorer. UserData object. 64Kb per domain (x10 for trusted domains) Adobe Local Storage Objects AMASS (AJAX MAssive Storage System) Later AMASS->Dojo Toolkit (dojo.storage) Google.Gears (plugin, permissions)

3. HTML5 Storage (DOM Storage, Web Storage, Local Storage) - хранение данных key -> value - данные не передаются на сервер - встроено в браузер, не нужно библиотек, плагинов... - 5Мб (в IE - 10Mb) 8.0 3.5 4.0 4.0 10.5

4. Все данные хранятся как строки Использовать ParseInt() & ParseFloat() window.localStorage vs. winsdow.sessionStorage - getItem() - setItem() - removeItem() localStorage['a'] && localStorage.a localStorage.key() localStorage.clear() localStorage.length IE : localStorage.remainingSpace

5. Web SQL DB - SQLite (SQL syntax) - SELECT, UPDATE, INSERT, DELETE... - - 4.0 4.0 10.5

6. dbh = openDatabase( "MyDB" , "1.0.0" , "My Database" , 1048576); dbh.transaction(function(tx) { tx.executeSql( ' CREATE TABLE table01 (id INTEGER PRIMARY KEY, name TEXT) ', [], //params function(tx, rs){}, //result handler function(tx, er){} //error handler ); });

7. dbh.transaction(function(tx) { tx.executeSql( ' INSERT INTO TABLE table01 (id, name) VALUES (?, ?) ', [i, name], function(tx, rs){}, function(tx, er){} ); });

8. dbh.transaction(function(tx) { tx.executeSql( ' SELECT * FROM table01 WHERE name = ? ', [name], function(tx, rs){}, function(tx, er){} ); });

9. SQLResultSet insertId : Error: ... (SELECT QUERY) rows : SQLResultSetRowList length : 1 __proto__ : SQLResultSetRowList constructor : function SQLResultSetRowList()... item : function item() ... arguments : null caller : null length : 0 name : "item" prototype : item __proto__ : function Empty() {} __proto__ : Object rowsAffected : 1 __proto__ : SQLResultSet SQLError code : 5 message : "no such table: table01" __proto__ : SQLError

10. IndexedDB IE9 ? 4.0 - 8.0 -

11. четыре типа транзакций: READ_ONLY READ_WRITE SNAPSHOT_READ VERSION_CHANGED

12. idb = window.mozIndexedDB || window.webkitIndexedDB || null; //new ActiveXObject("SQLCE.Factory.4.0"); //new ActiveXObject("SQLCE.FactorySync.4.0"); var request = window.indexedDB.open("DatabaseName", "DatabaseDescription"); request.onsuccess = function(event){ var database = event.result; write("Database Opened", database); }; request.onerror = function(e){ writeError(e); };

13. WebDatabase var kids = [ { name : &quot;Anna&quot; } , { name : &quot;Betty&quot; } , { name : &quot;Christine&quot; } ] ; var db = window. openDatabase ( &quot;CandyDB&quot; , &quot;1&quot; , &quot;My candy store database&quot; , 1024 ) ; db. transaction ( function ( tx ) { for ( var index = 0 ; index < kids. length ; index ++ ) { var kid = kids [ index ] ; tx. executeSql ( &quot;INSERT INTO kids (name) VALUES (?);&quot; , [ kid ] , function ( tx , results ) { alert( &quot;Saved record for &quot; + kid. name + &quot; with id &quot; + results. insertId ); } ) ; } }) ;

14. IndexedDB var kids = [ { name : &quot;Anna&quot; } , { name : &quot;Betty&quot; } , { name : &quot;Christine&quot; } ] ; var request = window. indexedDB . open ( &quot;CandyDB&quot; , &quot;My candy store database&quot; ) ; request. onsuccess = function ( event ) { var objectStore = event. result . objectStore ( &quot;kids&quot; ) ; for ( var index = 0 ; index < kids. length ; index ++ ) { var kid = kids [ index ] ; objectStore. add ( kid ) . onsuccess = function ( event ) { alert( &quot;Saved record for &quot; + kid. name + &quot; with id &quot; + event. result ); } ; } } ;

15. Почитать: http://dev.w3.org/html5/webstorage/ http://msdn.microsoft.com/en-us/library/cc197062%28VS.85%29.aspx http://htmlbook.ru/html5/storage / http://diveintohtml5.org/storage.html http://dev.w3.org/html5/webdatabase/ http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/ http://mikewest.org/2010/12/intro-to-indexeddb http://habrahabr.ru/blogs/webdev/117473/ http://msdn.microsoft.com/en-us/scriptjunkie/gg679063