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


Posted in HTML / CSS onMay 08, 2014

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

一、localStorage API 基本使用方法

localStorage API 使用方法简单易懂,如下为常见的 API 操作及示例: 设置数据:localStorage.setItem(key,value); 示例:

复制代码
代码如下:

for(var i=0; i<10; i++){
localStorage.setItem(i,i);
}

获取数据:localStorage.getItem(key) 获取全部数据:localStorage.valueOf() 示例:
复制代码
代码如下:
for(var i=0; i<10; i++){
localStorage.getItem(i);
}

删除数据:localStorage.removeItem(key) 示例:
复制代码
代码如下:
for(var i=0; i<5; i++){
localStorage.removeItem(i);
}

清空全部数据:localStorage.clear() 获取本地存储数据数量:localStorage.length 获取第 N 个数据的 key 键值:localStorage.key(N)

2. 遍历 key 键值方法

复制代码
代码如下:

for(var i=localStorage.length - 1 ; i >=0; i--){
console.log('第'+ (i+1) +'条数据的键值为:' + localStorage.key(i) +',数据为:' + localStorage.getItem(localStorage.key(i)));
}

3. 存储大小限制测试及异常处理

3.1 数据存储大小限制测试

不同浏览器对 HTML5 的本地存储大小基本均有限制,一个测试的结果如下:

复制代码
代码如下:
IE 9 > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome 28.0 > 2621435 + 5 = 2621440
safari 5.1 > 2621435 + 5 = 2621440
opera 12.15 > 5M (超出则会弹出允许请求更多空间的对话框)

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

测试代码参考:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<script>
function log( msg ) {
console.log(msg);
alert(msg);
}</p> <p> var limit;
var half = '1'; //这里会换成中文再跑一遍
var str = half;
var sstr;
while ( 1 ) {
try {
localStorage.clear();
str += half;
localStorage.setItem( 'cache', str );
half = str;
} catch ( ex ) {
break;
}
}
var base = str.length;
var off = base / 2;
var isLeft = 1;
while ( off ) {
if ( isLeft ) {
end = base - (off / 2);
} else {
end = base + (off / 2);
}</p> <p> sstr = str.slice( 0, end );
localStorage.clear();
try {
localStorage.setItem( 'cache', sstr );
limit = sstr.length;
isLeft = 0;
} catch ( e ) {
isLeft = 1;
}</p> <p> base = end;
off = Math.floor( off / 2 );
}</p> <p> log( 'limit: ' + limit );
</script>
</html>

3.2 数据存储异常处理

复制代码
代码如下:

try{
localStorage.setItem(key,value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('超出本地存储限额!');
//如果历史信息不重要了,可清空后再设置
localStorage.clear();
localStorage.setItem(key,value);
}
}
HTML / CSS 相关文章推荐
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
html5实现canvas阴影效果示例
May 07 #HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 #HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 #HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 #HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 #HTML / CSS
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
python中pow函数用法及功能说明
2020/12/04 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
学生操行评语大全
2014/04/24 职场文书
白血病募捐倡议书
2014/05/14 职场文书
接收函格式
2015/01/30 职场文书
秋收起义观后感
2015/06/11 职场文书
爱国主义电影观后感
2015/06/18 职场文书
运动员代表致辞
2015/07/29 职场文书
导游词之日本富士山
2020/01/06 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL