Html5 storage api

1,857 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,857
On SlideShare
0
From Embeds
0
Number of Embeds
379
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5 storage api

  1. 1. Jean Carlo Nascimento  a.k.a. SUISSA  
  2. 2. nosqlbr.com.br jquerybrasil.org frontendbrasil.com.br github.com/suissa about.me/suissa @osuissa
  3. 4. <ul><li>Sem API </li></ul><ul><li>name=value </li></ul><ul><li>Tamanho máximo 4Kb     </li></ul><ul><li>enviado ao server em toda requisição </li></ul>
  4. 5.   <ul><li>function setCookie(c_name,value,exdays){ </li></ul><ul><li>     var exdate=new Date(); </li></ul><ul><li>     exdate.setDate(exdate.getDate() + exdays); </li></ul><ul><li>     var c_value=escape(value) + ((exdays==null) ? &quot;&quot; : &quot;;      </li></ul><ul><li>     expires=&quot;+exdate.toUTCString()); </li></ul><ul><li>     document.cookie=c_name + &quot;=&quot; + c_value; </li></ul><ul><li>}  </li></ul><ul><li>fonte:  http://www.w3schools.com/js/js_cookies.asp </li></ul>
  5. 6.   <ul><li>function getCookie(c_name){ </li></ul><ul><li>     var i,x,y,ARRcookies=document.cookie.split(&quot;;&quot;); </li></ul><ul><li>     for (i=0;i<ARRcookies.length;i++){ </li></ul><ul><li>           x=ARRcookies[i].substr(0,ARRcookies[i].indexOf(&quot;=&quot;)); </li></ul><ul><li>           y=ARRcookies[i].substr(ARRcookies[i].indexOf(&quot;=&quot;)+1); </li></ul><ul><li>           x=x.replace(/^s+|s+$/g,&quot;&quot;); </li></ul><ul><li>           if (x==c_name){ </li></ul><ul><li>                 return unescape(y); </li></ul><ul><li>             } </li></ul><ul><li>       } </li></ul><ul><li>} </li></ul><ul><li>fonte:  http://www.w3schools.com/js/js_cookies.asp   </li></ul>
  6. 8. <ul><li>API Storage </li></ul><ul><li>key/value </li></ul><ul><li>Tamanho máximo 5Mb </li></ul><ul><li>não enviado ao servidor </li></ul>
  7. 10. <ul><li>SQL </li></ul><ul><li>Relacional </li></ul><ul><li>Tamanho padrão 5MB  </li></ul><ul><li>(ilimitado via manifest) </li></ul><ul><li>não enviado ao servidor </li></ul>
  8. 12. <ul><li>Ind exed Database API Objetos(JSON) </li></ul><ul><li>Tamanho padrão 5MB  </li></ul><ul><li>(ilimitado via manifest) </li></ul><ul><li>não enviado ao servid or </li></ul>
  9. 14. <ul><li>function supports_sessionStorage() { </li></ul><ul><li>  try { </li></ul><ul><li>    return 'sessionStorage' in window && window['sessionStorage'] !== null; </li></ul><ul><li>  } catch (e) { </li></ul><ul><li>    return false; </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul><ul><li>if (Modernizr.sessionstorage) { </li></ul><ul><li>  // sessionStorage esta disponível! </li></ul><ul><li>} else { </li></ul><ul><li>  // bad bad browser, no donuts for you. </li></ul><ul><li>} </li></ul>
  10. 15. <ul><li>function supports_localStorage() { </li></ul><ul><li>  try { </li></ul><ul><li>    return 'localStorage' in window && window['localStorage'] !== null; </li></ul><ul><li>  } catch (e) { </li></ul><ul><li>    return false; </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul><ul><li>if (Modernizr.localstorage) { </li></ul><ul><li>  // sessionStorage esta disponível! </li></ul><ul><li>} else { </li></ul><ul><li>  // bad bad browser, no donuts for you. </li></ul><ul><li>} </li></ul>
  11. 16. <ul><li>function supports_webSQL() { </li></ul><ul><li>  try { </li></ul><ul><li>    return !!window.openDatabase; </li></ul><ul><li>  } catch (e) { </li></ul><ul><li>    return false; </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul><ul><li>if (Modernizr.websqldatabase) { </li></ul><ul><li>  // WebSQL esta disponível! </li></ul><ul><li>} else { </li></ul><ul><li>  // bad bad browser, no donuts for you. </li></ul><ul><li>} </li></ul>
  12. 17. <ul><li>function supports_indexedDB() { </li></ul><ul><li>  try { </li></ul><ul><li>    return !!window.indexedDB ||  </li></ul><ul><li>     !!window.webkitIndexedDB ||  </li></ul><ul><li>     !!window.mozIndexedDB; </li></ul><ul><li>  } catch (e) { </li></ul><ul><li>    return false; </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul><ul><li>if (Modernizr.indexeddb) { </li></ul><ul><li>  // IndexedDB esta disponível! </li></ul><ul><li>} else { </li></ul><ul><li>  // bad bad browser, no donuts for you. </li></ul><ul><li>} </li></ul>
  13. 19. localStorage.setItem() localStorage.getItem() localStorage.clear() localStorage.key() localStorage.removeItem() sessionStorage.setItem() sessionStorage.getItem() sessionStorage.clear() sessionStorage.key() sessionStorage.removeItem()
  14. 21. Asynchronous API <ul><li>IDBCursor          </li></ul><ul><li>IDBDatabase </li></ul><ul><li>IDBFactory </li></ul><ul><li>IDBEnvironment </li></ul><ul><li>IDBIndex </li></ul><ul><li>IDBObjectStore </li></ul><ul><li>IDBRequest </li></ul><ul><li>IDBTransaction </li></ul><ul><li>IDBVersionChangeEvent </li></ul><ul><li>IDBVersionChangeRequest </li></ul>
  15. 22. Synchronous API* <ul><li>IDBCursorSync </li></ul><ul><li>IDBDatabaseSync </li></ul><ul><li>IDBEnvironmentSync </li></ul><ul><li>IDBFactorySync </li></ul><ul><li>IDBIndexSync </li></ul><ul><li>IDBObjectStoreSync </li></ul><ul><li>IDBTransactionSync </li></ul><ul><li>*não implementada ainda. </li></ul>
  16. 23. Referências <ul><li>http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute </li></ul><ul><li>http://dev.w3.org/html5/webstorage/#dom-localstorage </li></ul><ul><li>http://dev.w3.org/html5/webdatabase/ </li></ul><ul><li>http://www.w3.org/TR/IndexedDB/   </li></ul><ul><li>https://developer.mozilla.org/en/IndexedDB   </li></ul>

×