加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 在线留言 | RSS
成网科技业务包括域名空间企业网站制作
 
国际域名com/net/org仅售80元/年
1G独立空间(PHP+MYSQL)仅售600元/年
您当前的位置:首页 > 网页制作 > html5

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

时间:2014-08-02 12:09:15  来源:互联网  作者:佚名  点击:

这篇文章主要介绍了HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等,需要的朋友可以参考下

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异,如使用方法、最大存储空间等。UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

一、localStorage API 基本使用方法UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

localStorage API 使用方法简单易懂,如下为常见的 API 操作及示例: 设置数据:localStorage.setItem(key,value); 示例:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
for(var i=0; i<10; i++){UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem(i,i);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
获取数据:localStorage.getItem(key) 获取全部数据:localStorage.valueOf() 示例:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:for(var i=0; i<10; i++){UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.getItem(i);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
删除数据:localStorage.removeItem(key) 示例:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:for(var i=0; i<5; i++){UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.removeItem(i);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
清空全部数据:localStorage.clear() 获取本地存储数据数量:localStorage.length 获取第 N 个数据的 key 键值:localStorage.key(N)UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

2. 遍历 key 键值方法UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
for(var i=localStorage.length - 1 ; i >=0; i--){UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
console.log('第'+ (i+1) +'条数据的键值为:' + localStorage.key(i) +',数据为:' + localStorage.getItem(localStorage.key(i)));UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
3. 存储大小限制测试及异常处理UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

3.1 数据存储大小限制测试UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

不同浏览器对 HTML5 的本地存储大小基本均有限制,一个测试的结果如下:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:IE 9 > 4999995 + 5 = 5000000UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
firefox 22.0 > 5242875 + 5 = 5242880UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
chrome 28.0 > 2621435 + 5 = 2621440UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
safari 5.1 > 2621435 + 5 = 2621440UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
opera 12.15 > 5M (超出则会弹出允许请求更多空间的对话框)UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

测试代码参考:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设


复制代码代码如下:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<!DOCTYPE html>UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<html>UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<head>UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<script>UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function log( msg ) {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
console.log(msg);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
alert(msg);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}</p><p> var limit;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var half = '1'; //这里会换成中文再跑一遍UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var str = half;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var sstr;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
while ( 1 ) {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
try {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.clear();UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
str += half;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem( 'cache', str );UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
half = str;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
} catch ( ex ) {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
break;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var base = str.length;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var off = base / 2;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var isLeft = 1;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
while ( off ) {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
if ( isLeft ) {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
end = base - (off / 2);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
} else {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
end = base + (off / 2);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}</p><p> sstr = str.slice( 0, end );UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.clear();UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
try {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem( 'cache', sstr );UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
limit = sstr.length;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
isLeft = 0;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
} catch ( e ) {UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
isLeft = 1;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}</p><p> base = end;UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
off = Math.floor( off / 2 );UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}</p><p> log( 'limit: ' + limit );UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</script>UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</html>UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
3.2 数据存储异常处理UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设


复制代码代码如下:UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
try{UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem(key,value);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}catch(oException){UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
if(oException.name == 'QuotaExceededError'){UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
console.log('超出本地存储限额!');UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//如果历史信息不重要了,可清空后再设置UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.clear();UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem(key,value);UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
UzJ成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

成网科技 www.it28.com竭诚为您服务!
开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设_成网科技

更多
 


来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
栏目更新
栏目热门