Html5 storage api

download

of 23

Embed Size (px)

transcript

  • 1.Jean Carlo Nascimento a.k.a.SUISSA

2. nosqlbr.com.br jquerybrasil.org frontendbrasil.com.br github.com/suissa about.me/suissa @osuissa 3. 4.

  • Sem API
  • name=value
  • Tamanho mximo 4Kb
  • enviado ao server em toda requisio

5.

  • 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

6.

  • function getCookie(c_name){
  • var i,x,y,ARRcookies=document.cookie.split(";");
  • for (i=0;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

7. 8.

  • API Storage
  • key/value
  • Tamanho mximo 5Mb
  • no enviado ao servidor

9. 10.

  • SQL
  • Relacional
  • Tamanho padro 5MB
  • (ilimitado via manifest)
  • no enviado ao servidor

11. 12.

  • Ind exed Database API Objetos(JSON)
  • Tamanho padro 5MB
  • (ilimitado via manifest)
  • no enviado ao servid or

13. 14.

  • function supports_sessionStorage() {
  • try {
  • return 'sessionStorage' in window && window['sessionStorage'] !== null;
  • } catch (e) {
  • return false;
  • }
  • }
  • if (Modernizr.sessionstorage) {
  • // sessionStorage esta disponvel!
  • } else {
  • // bad bad browser, no donuts for you.
  • }

15.

  • function supports_localStorage() {
  • try {
  • return 'localStorage' in window && window['localStorage'] !== null;
  • } catch (e) {
  • return false;
  • }
  • }
  • if (Modernizr.localstorage) {
  • // sessionStorage esta disponvel!
  • } else {
  • // bad bad browser, no donuts for you.
  • }

16.

  • function supports_webSQL() {
  • try {
  • return !!window.openDatabase;
  • } catch (e) {
  • return false;
  • }
  • }
  • if (Modernizr.websqldatabase) {
  • // WebSQL esta disponvel!
  • } else {
  • // bad bad browser, no donuts for you.
  • }

17.

  • function supports_indexedDB() {
  • try {
  • return !!window.indexedDB ||
  • !!window.webkitIndexedDB ||
  • !!window.mozIndexedDB;
  • } catch (e) {
  • return false;
  • }
  • }
  • if (Modernizr.indexeddb) {
  • // IndexedDB esta disponvel!
  • } else {
  • // bad bad browser, no donuts for you.
  • }

18. 19. localStorage.setItem() localStorage.getItem() localStorage.clear() localStorage.key() localStorage.removeItem() sessionStorage.setItem() sessionStorage.getItem() sessionStorage.clear() sessionStorage.key() sessionStorage.removeItem() 20. 21. Asynchronous API

  • IDBCursor
  • IDBDatabase
  • IDBFactory
  • IDBEnvironment
  • IDBIndex
  • IDBObjectStore
  • IDBRequest
  • IDBTransaction
  • IDBVersionChangeEvent
  • IDBVersionChangeRequest

22. Synchronous API*

  • IDBCursorSync
  • IDBDatabaseSync
  • IDBEnvironmentSync
  • IDBFactorySync
  • IDBIndexSync
  • IDBObjectStoreSync
  • IDBTransactionSync
  • *no implementada ainda.

23. Referncias

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