最近要做手机微博，对着新浪手机微博看了下里面用了很多HTML5的本地存储的东西，看了一些关于HTML5的本地存储的文章，现把我的一些经验分享给大家，当然也期待您的板儿砖。。。。
1.首先谈谈HTML5的本地存储支持问题，见下图（这张图很好的诠释了支持问题）
我要做的手机微博主要需要支持iOS和Android自带的手机浏览器，iOS支持的很好。Android我测试了下，附上JS代码检验是否支持HTML5本地存储 ,如果可以显示“sessionStorage:aaaa”的话表示支持。
<!DOCTYPE HTML> <html > <head> <meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="-1" /> <title> 手机微博 </title> </head> <body> <script> document.write("sessionStorage:"); sessionStorage.setItem("html","aaaa"); document.write(sessionStorage.getItem("html")); </script> </body> </html>
结果发现，Android操作系统的只有Android2.1及其以上的版本自带的浏览器才能很好的支持HTML5本地存储。
localStorage与sessionStorage的区别
localStorage的数据是页面共享的，但有些情况，我们需要一个浏览器中的不同页面可以单独操作自己的数据。这时我们就可以用sessionStorage了，它存储的数据只有当前页面可以访问。
1> localStorage
首先判断是否支持localStorage，附上代码
function getLocalStorage() { try { if( !! window.localStorage ) return window.localStorage; } catch(e) { return undefined; } }
保存数据
var db = getLocalStorage(); if(db) { db.setItem('author', 'jasonling'); db.setItem('company', 'Tencent'); db.setItem('introduction', 'A code lover !'); }
用sqlite 查看localStorage信息，其中localStorage的位置不同操作系统不太一样，我干脆就搜索Local Storage，然后发现在我的电脑（WinXP）的路径为：C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\User Data\Default\Local Storage，里面可以根据域名来获取你的localstorage文件，我的为：http_kang.eastmoney.com_0.localstorage
localStorage可以添加事件监听函数，如果对应的有变化的话，就可以监测得到。以下两个文件可以看到效果（init.html、change.html）
init.html 该文件用来初始化localStorage并监测变化，代码如下：
<!DOCTYPE HTML> <html > <head> <meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="-1" /> <title>
</title></head><body><div id="eventResult"></div><script>function getLocalStorage() { try { if( !! window.localStorage ) return window.localStorage; } catch(e) { return undefined; } } var db = getLocalStorage(); if(db) { db.setItem('author', 'jasonling'); db.setItem('company', 'Tencent'); db.setItem('introduction', 'A code lover !'); }function getAddEventHandler() { try { if( !! window.addEventListener ) return window.addEventListener; } catch(e) { return undefined; }} //EventStatus function eventStatus(s) { if(s) document.getElementById('eventResult').innerHTML = s; else document.getElementById('eventResult').innerHTML = 'Event status'; } //Event handler function eventHandler(e) { eventStatus('Event triggered: ' + e.url + ' ' + e.storageArea.author + ' ' + e.storageArea.company + ' ' + e.storageArea.introduction);} var addEL = getAddEventHandler(); //这是上面写的一个函数 if(addEL) { addEL('storage',eventHandler,false); //给storage事件加上监听器 } else { document.getElementById('eventResult').innerHTML = 'This browser does not support event listeners'; }</script></body></html>
change.html 用来改变init.html中的localStorage的值，代码如下：
<!DOCTYPE HTML> <html > <head> <meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="-1" /> <title></title><script language="javascript" src="http://u1.sinaimg.cn/upload/h5/wq/js/jquery-1.5.1.min.js"></script></head><body><div class="protected" style="width:200px;height:200px;background:#f00;position:absolute">aaa</div><script>function getLocalStorage() { try { if( !! window.localStorage ) return window.localStorage; } catch(e) { return undefined; } } var db = getLocalStorage(); if(db) { db.setItem('author', '4'); db.setItem('company', '5'); db.setItem('introduction', '6'); }</script></body></html>
这样，每次local storage里面的数据变化时，浏览器里面的数据就会自动变化了，因为storage事件被监听后，浏览器就会时时监视local storage里的数据，如果变化，就会触发事件，修改页面。不管几个页面都会做出相应的修改。
要注意一点，这个事件只有在同一个浏览器程序里面才有效（比如你不能在chrome和firefox各打开一个页面，然后等着事件生效），因为不同浏览器的sqlite文件不一样，各自修改自己的数据，当然不会对其它浏览器的数据造成影响。
经过上面的介绍，大家可以看出，忽略事件的内容外，localstorage的操作其实也很简单，和cookie一样很容易操作。
2>sessionStorage
首先判断下支不支持sessionStorage，代码如下
function getSessionStorage() { try { if( !! window.sessionStorage ) return window.sessionStorage; } catch(e) { return undefined; } }保存数据
var db = getSessionStorage(); if(db) { db.setItem('author','jasonling'); db.setItem('company', 'Tencent'); db.setItem('introduction', 'A code lover!'); } //和localStorage一样的操作然后打开浏览器，同时打开两个网页做测试，发现只有在同一个窗口才会一直保留，就连一个浏览器下的两个标签sessionStorage都不共用。
