最近要做手机微博,对着新浪手机微博看了下里面用了很多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都不共用。