• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Local storages
 

Local storages

on

  • 1,423 views

Using of HTML5 storages, WEB SQL DB and IndexedDB

Using of HTML5 storages, WEB SQL DB and IndexedDB

Statistics

Views

Total Views
1,423
Views on SlideShare
1,423
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

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…
Post Comment
Edit your comment

    Local storages Local storages Presentation Transcript

    • Локальные хранилища
    • История: 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)
    • HTML5 Storage   (DOM Storage, Web Storage, Local Storage) - хранение данных key -> value - данные не передаются на сервер - встроено в браузер, не нужно библиотек, плагинов... - 5Мб (в IE - 10Mb) 8.0 3.5 4.0 4.0 10.5
    • Все данные хранятся как строки Использовать ParseInt() & ParseFloat() window.localStorage vs. winsdow.sessionStorage - getItem() - setItem() - removeItem() localStorage['a'] && localStorage.a localStorage.key() localStorage.clear() localStorage.length IE : localStorage.remainingSpace
    • Web SQL DB - SQLite (SQL syntax) - SELECT, UPDATE, INSERT, DELETE... - - 4.0 4.0 10.5
    • 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    ); });
    • dbh.transaction(function(tx) {    tx.executeSql(     ' INSERT INTO TABLE table01 (id, name) VALUES (?, ?) ',     [i, name],     function(tx, rs){},     function(tx, er){}   ); });
    • dbh.transaction(function(tx) {   tx.executeSql(     ' SELECT * FROM table01 WHERE name = ? ',       [name],       function(tx, rs){},      function(tx, er){}   ); });
    • 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
    • IndexedDB IE9 ? 4.0 - 8.0 -
    • четыре типа транзакций:  READ_ONLY READ_WRITE SNAPSHOT_READ VERSION_CHANGED
    • 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); };
    • 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 );       }     ) ;   } }) ;
    • 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 );       } ;     }   } ;
    • Почитать: 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