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图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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简单封装了一些常用JS操作
2007/02/25 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
web前端开发也需要日志
2010/12/09 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
初步剖析C语言编程中的结构体
2016/01/16 Python
python计算auc指标实例
2017/07/13 Python
python+opencv实现阈值分割
2018/12/26 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
留学推荐信范文
2014/05/10 职场文书
高中班级口号
2014/06/09 职场文书
质量主管工作职责
2014/09/26 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
工厂见习报告范文
2014/10/31 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
python如何将mat文件转为png
2022/07/15 Python