Local storages

1,355 views
1,306 views

Published on

Using of HTML5 storages, WEB SQL DB and IndexedDB

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,355
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Local storages

  1. 1. Локальные хранилища
  2. 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. 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. 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. 5. Web SQL DB - SQLite (SQL syntax) - SELECT, UPDATE, INSERT, DELETE... - - 4.0 4.0 10.5
  6. 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. 7. dbh.transaction(function(tx) {    tx.executeSql(     ' INSERT INTO TABLE table01 (id, name) VALUES (?, ?) ',     [i, name],     function(tx, rs){},     function(tx, er){}   ); });
  8. 8. dbh.transaction(function(tx) {   tx.executeSql(     ' SELECT * FROM table01 WHERE name = ? ',       [name],       function(tx, rs){},      function(tx, er){}   ); });
  9. 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. 10. IndexedDB IE9 ? 4.0 - 8.0 -
  11. 11. четыре типа транзакций:  READ_ONLY READ_WRITE SNAPSHOT_READ VERSION_CHANGED
  12. 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. 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. 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. 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  

×