Your SlideShare is downloading. ×
0
HTML5 Storage and Local Storage<br />Sway Deng(@swaydeng)<br />2011-1-14<br />
Cookie is our favorite, but…… <br />
Cookies:<br />The size of storage space is small<br />The number of key-value pair is limited<br />are included with every...
What we need:<br />A lot of storage space<br />On the client,not included with every HTTP request<br />That persists beyon...
What we already have:<br />userData(IE)<br />Local Shared Objects(Adobe)<br />Gears(Google)<br />
userData<br />Some code source…<br />
userData<br />available only in the same directory and with the same protocolno allowance for increasing space<br />Depend...
Local Shared Objects<br />
Local Shared Objects<br />Customize storage space(default:100K)<br />Same domain<br />Cross-browser<br />
But Google has say goodbye to Gears<br />HTML5 is more attractive<br />Gears is not that popular<br />We don’t need a dupl...
HTML5 Storage<br />
Web Storage<br />Web Storage support<br />
Web Storage<br />interface Storage { <br />readonly unsigned long length; <br />DOMString key(index);<br />    any getItem...
Web Storage<br />
Web Storage<br />Remove data<br />
Web Storage<br />Storage event<br />sessionStorage<br />Limitations(permission,storage space)<br />
Web SQL Database<br />Web SQL Database support<br />
Web SQL Database<br />Three core methods:<br />openDatabase<br />transaction (?)<br />executeSql<br />Demo<br />
Web SQL Database<br />Why Web SQL DB is going to die?<br />Browser vendors don’t support it widely<br />Inelegant solution...
Indexed Database<br />Object based storage<br />NoSQL-Style(structured storage)<br />asynchronous APIs (synchronous APIs l...
Open and set up a DB<br />
Store data in DB<br />
Indexed Database<br />Can we use now ?<br />The answer is No!<br />But it is coming soon<br />
Indexed Database<br />
Offline Web Applications<br />A solution for offline web apps<br />demo<br />
Offline Web Applications<br />Server side	<br />addType text/cache-manifest .manifest<br />Client side<br />CACHE MANIFEST...
Offline Web Applications<br />Event<br />online<br />offline<br />
Usage<br />Customize your web(like customize google menu,store large numbers of video list etc.)<br />Cache static assets(...
Problem<br />Security<br />Storage space management<br />
The end<br />
Upcoming SlideShare
Loading in...5
×

Html5 storage and browser storage

1,173

Published on

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,173
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 storage and browser storage"

  1. 1. HTML5 Storage and Local Storage<br />Sway Deng(@swaydeng)<br />2011-1-14<br />
  2. 2.
  3. 3. Cookie is our favorite, but…… <br />
  4. 4. Cookies:<br />The size of storage space is small<br />The number of key-value pair is limited<br />are included with every HTTP request, slowing down web apps.<br />
  5. 5. What we need:<br />A lot of storage space<br />On the client,not included with every HTTP request<br />That persists beyond a page refresh<br />
  6. 6. What we already have:<br />userData(IE)<br />Local Shared Objects(Adobe)<br />Gears(Google)<br />
  7. 7. userData<br />Some code source…<br />
  8. 8. userData<br />available only in the same directory and with the same protocolno allowance for increasing space<br />Depends on security settings<br />
  9. 9. Local Shared Objects<br />
  10. 10. Local Shared Objects<br />Customize storage space(default:100K)<br />Same domain<br />Cross-browser<br />
  11. 11.
  12. 12. But Google has say goodbye to Gears<br />HTML5 is more attractive<br />Gears is not that popular<br />We don’t need a duplicate<br />
  13. 13. HTML5 Storage<br />
  14. 14. Web Storage<br />Web Storage support<br />
  15. 15. Web Storage<br />interface Storage { <br />readonly unsigned long length; <br />DOMString key(index);<br /> any getItem(key);<br /> void setItem(key, value);<br /> void removeItem(key);<br /> void clear();<br /> };<br />
  16. 16. Web Storage<br />
  17. 17. Web Storage<br />Remove data<br />
  18. 18. Web Storage<br />Storage event<br />sessionStorage<br />Limitations(permission,storage space)<br />
  19. 19. Web SQL Database<br />Web SQL Database support<br />
  20. 20. Web SQL Database<br />Three core methods:<br />openDatabase<br />transaction (?)<br />executeSql<br />Demo<br />
  21. 21. Web SQL Database<br />Why Web SQL DB is going to die?<br />Browser vendors don’t support it widely<br />Inelegant solution<br />The specification is illegible<br />A better solution is already there<br />
  22. 22. Indexed Database<br />Object based storage<br />NoSQL-Style(structured storage)<br />asynchronous APIs (synchronous APIs later)<br />
  23. 23. Open and set up a DB<br />
  24. 24. Store data in DB<br />
  25. 25. Indexed Database<br />Can we use now ?<br />The answer is No!<br />But it is coming soon<br />
  26. 26. Indexed Database<br />
  27. 27. Offline Web Applications<br />A solution for offline web apps<br />demo<br />
  28. 28. Offline Web Applications<br />Server side <br />addType text/cache-manifest .manifest<br />Client side<br />CACHE MANIFEST<br /># revision 630<br />../halma-localstorage.js<br />css/layout.css <br />images/sofish.png <br />NETWORK:<br /># assets that available only when online: <br />sample.json<br />FALLBACK: <br />notfound.html <br /><!DOCTYPE html> <br /><html manifest="sample.manifest"> <br />
  29. 29. Offline Web Applications<br />Event<br />online<br />offline<br />
  30. 30. Usage<br />Customize your web(like customize google menu,store large numbers of video list etc.)<br />Cache static assets(css,js,images)<br />
  31. 31. Problem<br />Security<br />Storage space management<br />
  32. 32. The end<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×