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绘制出各种几何图形
Aug 17 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 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
重置版战役片段
2020/04/09 魔兽争霸
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
js验证表单第二部分
2006/11/25 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python中数字是否为可变类型
2020/07/08 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python实现AdaBoost算法的示例
2020/10/03 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
事业单位个人总结
2015/02/12 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技