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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
Canvas globalCompositeOperation
Dec 18 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
pytorch forward两个参数实例
2020/01/17 Python
详解python内置模块urllib
2020/09/09 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
会计专业自我鉴定范文
2013/10/06 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
小学教师个人总结
2015/02/05 职场文书
2015年读书月活动总结
2015/03/26 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
廉政承诺书范文
2015/04/28 职场文书
运输公司工作总结
2015/08/11 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python