Download - Html5 storage api

Transcript
Page 1: Html5 storage api

Jean Carlo Nascimento a.k.a. SUISSA  

Page 2: Html5 storage api

nosqlbr.com.brjquerybrasil.org

frontendbrasil.com.brgithub.com/suissaabout.me/suissa

@osuissa

Page 3: Html5 storage api
Page 4: Html5 storage api

Sem API

name=value

Tamanho máximo 4Kb    

enviado ao server em toda requisição

Page 5: Html5 storage api

 

function setCookie(c_name,value,exdays){    var exdate=new Date();    exdate.setDate(exdate.getDate() + exdays);    var c_value=escape(value) + ((exdays==null) ? "" : ";         expires="+exdate.toUTCString());    document.cookie=c_name + "=" + c_value;} 

fonte: http://www.w3schools.com/js/js_cookies.asp

Page 6: Html5 storage api

 

function getCookie(c_name){    var i,x,y,ARRcookies=document.cookie.split(";");    for (i=0;i<ARRcookies.length;i++){          x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));          y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);          x=x.replace(/^\s+|\s+$/g,"");          if (x==c_name){                return unescape(y);            }      }}

fonte: http://www.w3schools.com/js/js_cookies.asp 

Page 7: Html5 storage api
Page 8: Html5 storage api

API Storage

key/value

Tamanho máximo 5Mb

não enviado ao servidor

Page 9: Html5 storage api
Page 10: Html5 storage api

SQL

Relacional

Tamanho padrão 5MB (ilimitado via manifest)

não enviado ao servidor

Page 11: Html5 storage api
Page 12: Html5 storage api

Indexed Database APIObjetos(JSON)

Tamanho padrão 5MB (ilimitado via manifest)

não enviado ao servidor

Page 13: Html5 storage api
Page 14: Html5 storage api

function supports_sessionStorage() {  try {    return 'sessionStorage' in window && window['sessionStorage'] !== null;  } catch (e) {    return false;  }}

if (Modernizr.sessionstorage) {  // sessionStorage esta disponível!} else {  // bad bad browser, no donuts for you.}

Page 15: Html5 storage api

function supports_localStorage() {  try {    return 'localStorage' in window && window['localStorage'] !== null;  } catch (e) {    return false;  }}

if (Modernizr.localstorage) {  // sessionStorage esta disponível!} else {  // bad bad browser, no donuts for you.}

Page 16: Html5 storage api

function supports_webSQL() {  try {    return !!window.openDatabase;  } catch (e) {    return false;  }}

if (Modernizr.websqldatabase) {  // WebSQL esta disponível!} else {  // bad bad browser, no donuts for you.}

Page 17: Html5 storage api

function supports_indexedDB() {  try {    return !!window.indexedDB ||     !!window.webkitIndexedDB ||     !!window.mozIndexedDB;  } catch (e) {    return false;  }}

if (Modernizr.indexeddb) {  // IndexedDB esta disponível!} else {  // bad bad browser, no donuts for you.}

Page 18: Html5 storage api
Page 19: Html5 storage api

localStorage.setItem()localStorage.getItem()localStorage.clear()localStorage.key()localStorage.removeItem()

sessionStorage.setItem()sessionStorage.getItem()sessionStorage.clear()sessionStorage.key()sessionStorage.removeItem()

Page 20: Html5 storage api
Page 21: Html5 storage api

Asynchronous API

IDBCursor         IDBDatabaseIDBFactoryIDBEnvironmentIDBIndexIDBObjectStoreIDBRequestIDBTransactionIDBVersionChangeEventIDBVersionChangeRequest

Page 22: Html5 storage api

Synchronous API*

IDBCursorSyncIDBDatabaseSyncIDBEnvironmentSyncIDBFactorySyncIDBIndexSyncIDBObjectStoreSyncIDBTransactionSync

*não implementada ainda.

Page 23: Html5 storage api

Referências

http://dev.w3.org/html5/webstorage/#the-sessionstorage-attributehttp://dev.w3.org/html5/webstorage/#dom-localstoragehttp://dev.w3.org/html5/webdatabase/http://www.w3.org/TR/IndexedDB/ https://developer.mozilla.org/en/IndexedDB