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绘制百度的小度熊
Oct 29 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 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脚本的10个技巧(3)
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
js和jquery中获取非行间样式
2017/05/05 jQuery
jstree单选功能的实现方法
2017/06/07 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Python类装饰器实现方法详解
2018/12/21 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python基于event实现线程间通信控制
2020/01/13 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
党支部书记岗位职责
2015/02/15 职场文书
小学教师教育随笔
2015/08/14 职场文书