Published on

3 ways of html5 local storage

Published in: Technology, Design
  • Be the first to comment


  1. 1. HTML5 三种本地存储方式的比较 前端组 罗晴明 2011-12-20
  2. 2. Introduction <ul><li>Manifest </li></ul><ul><li>Web SQL Database </li></ul><ul><li>Localstorage </li></ul><ul><li>IndexedDB(Not supported on iOS) </li></ul>
  3. 3. How to use Manifest Concept Game Test Exam <ul><li>1.Declare the manifest file in your HTML using the manifest attribute: </li></ul><ul><li><html manifest=&quot;path/filename.manifest&quot;> </li></ul><ul><li>2.The manifest file has the following requirements: </li></ul><ul><li>The file must be served with a MIME type of text/cache-manifest . </li></ul><ul><li>The file must have the same origin (domain and scheme) as the HTML file that declares it. </li></ul><ul><li>The first line of the file must consist of the text CACHE MANIFEST . </li></ul><ul><li>Subsequent lines may contain section headings, URLs of resources to cache, network URLs, or comments. </li></ul><ul><ul><li>Section headings consist of a single word, followed by a colon. Legal values are CACHE: , NETWORK: , or FALLBACK: . </li></ul></ul><ul><ul><li>Resource URLs can be absolute or relative to the manifest file (not relative to the HTML page that uses the resource). </li></ul></ul><ul><ul><li>Network URLs may contain an asterisk as a wildcard character. </li></ul></ul><ul><ul><li>Comments must be on a single line and preceded by the # character. </li></ul></ul><ul><ul><li>Comments may appear in any section of the manifest. </li></ul></ul>
  4. 4. Manifest Example CACHE MANIFEST # Cache manifest version 0.0.1 demoimages/clownfish.jpg demoimages/clownfishsmall.jpg demoimages/flowingrock.jpg demoimages/flowingrocksmall.jpg demoimages/stones.jpg NETWORK: # All URLs that start with the following lines are whitelisted. CACHE: # Additional items to cache. demoimages/stonessmall.jpg FALLBACK: demoimages/currentImg.jpg images/stockImage.jpg
  5. 5. Pros and Cons <ul><li>Pros: </li></ul><ul><ul><li>The only way to cache static files(html,css,img,js) on client-side. </li></ul></ul><ul><ul><li>Can be totally offline-capable if no external data is needed. </li></ul></ul><ul><li>Cons: </li></ul><ul><ul><li>Difficult to debug/update/modify/maintain files.(You should change the manifest file every time to make any modification to take effect). </li></ul></ul><ul><ul><li>An URL with a changed parameter would be recognized as a new page that is to be cached(eg,&quot;a.html?a&quot; and &quot;a.html?b&quot; would both be cached). </li></ul></ul>
  6. 6. How to use Web SQL Database <ul><li>The JavaScript database uses SQLite internally to store information. </li></ul><ul><li>For more information about SQLite, see the SQLite website at: </li></ul><ul><li> </li></ul><ul><li>A simple wrapper for using Web SQL Database: </li></ul><ul><li> </li></ul>
  7. 7. Pros and Cons <ul><li>Pros: </li></ul><ul><ul><li>The only way to cache data with size more than 5MB. </li></ul></ul><ul><ul><li>It has a full-feathered sqlite database,which is powerful for data maintence. </li></ul></ul><ul><li>Cons: </li></ul><ul><ul><li>Increased learning costs for web developers.SQL has nothing in common with javascript or html. </li></ul></ul><ul><ul><li>Webkit only.And may be deprecated or even canceled in the future. </li></ul></ul><ul><ul><li>Can only be used in asynchronous way,sometimes not fast enough. </li></ul></ul>
  8. 8. How to use LocalStorage <ul><li>2 ways to use localstorage: </li></ul><ul><li> = 'bar'; //directly access </li></ul><ul><li>localStorage.setItem('foo','bar'); //by setter/getter </li></ul><ul><li>Storing data can throw an exception if you exceed a browser-specific quota. If the data you are storing is important, you should check for this exception and handle it. For example: </li></ul><ul><li>try { </li></ul><ul><li>sessionStorage.setItem(&quot;shirt_size&quot;, myShirtSize); </li></ul><ul><li>} catch (e) { </li></ul><ul><li>if (e == QUOTA_EXCEEDED_ERR) { </li></ul><ul><li>alert('Unable to save preferred shirt size.'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  9. 9. How to use LocalStorage <ul><li> = { </li></ul><ul><li>_s:window.localStorage, </li></ul><ul><li>_SIZE:50, </li></ul><ul><li>_i:(function(){ </li></ul><ul><li>if(!window.localStorage.index) window.localStorage.index = 0; </li></ul><ul><li>return window.localStorage.index; </li></ul><ul><li>})(), </li></ul><ul><li>_m:(function(){ </li></ul><ul><li>if(! </li></ul><ul><li>return JSON.parse(; </li></ul><ul><li>})(), </li></ul><ul><li>save:function(id,data){...}, </li></ul><ul><li>load:function(id){ </li></ul><ul><li>var t=this,m=t._m,s=t._s; </li></ul><ul><li>if(s&&id)return s.getItem(m[id]); </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>return {}; </li></ul><ul><li>//map and record data id into index </li></ul><ul><li>//record current index </li></ul><ul><li>//set size </li></ul>
  10. 10. How to use LocalStorage <ul><li>save:function(id,data){ </li></ul><ul><li>var t=this,m=t._m,s=t._s,i=t._i; </li></ul><ul><li>if(s){ </li></ul><ul><li>if(id&&m[id]){ </li></ul><ul><li>} </li></ul><ul><li>else{ </li></ul><ul><li>s.setItem(i,data); </li></ul><ul><li>} </li></ul><ul><li>s.index = i; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>//save the index </li></ul><ul><li>//insert new data using new index if(id){ </li></ul><ul><li>m[id]= i; </li></ul><ul><li>//map dataid into the index = JSON.stringify(m); </li></ul><ul><li>//save the map } </li></ul><ul><li>if(++i===t._SIZE){ </li></ul><ul><li>i=0; </li></ul><ul><li>//increase the index and make sure it loops under the specific SIZE </li></ul><ul><li>s.setItem(m[id],data); </li></ul><ul><li>//override existed data </li></ul>
  11. 11. Pros and Cons <ul><li>Pros: </li></ul><ul><ul><li>Light-weight,fast,and easy to use. </li></ul></ul><ul><ul><li>Supported by most browsers.Best compatibility. </li></ul></ul><ul><li>Cons: </li></ul><ul><ul><li>The quota varies between different browsers.And none of them can be called &quot;enough&quot;. </li></ul></ul><ul><ul><li>Lack of advanced features.Have to manually maintain data size due to such quota. </li></ul></ul>
  12. 12. Thank you !