一、手机微博之HTML5的本地存储

最新推荐文章于 2022-07-25 20:13:53 发布

dakang

最新推荐文章于 2022-07-25 20:13:53 发布

阅读量2.5k

点赞数

分类专栏： WAP(HTML5|iPhone|Android|手机) 文章标签： html5 手机浏览器 function 存储 android

本文链接：https://blog.csdn.net/kaosini/article/details/6883884

版权

WAP(HTML5|iPhone|Android|手机) 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

最近要做手机微博，对着新浪手机微博看了下里面用了很多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本地存储。

2.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都不共用。



  3>除了以上两种存储方式外，还有 webSQL , indexedDB两种存储方式，因为这次项目用不到，暂不做介绍。可参考文章：http://blog.csdn.net/kaosini/article/details/6882036
 （毕）

dakang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一、手机微博之HTML5的本地存储

最近要做手机微博，对着新浪手机微博看了下里面用了很多HTML5的本地存储的东西，看了一些关于HTML5的本地存储的文章，现把我的一些经验分享给大家，当然也期待您的板儿砖。。。。1.首先谈谈HTML5的本地存储支持问题，见下图（这张图很好的诠释了支持问题）我要做的手机微博主要需要支持iOS和Android自带的手机浏览器，iOS支持的很好。Android我测试了下，附上
复制链接

扫一扫

专栏目录