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的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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生成酷炫的四个字符验证码
2016/04/22 PHP
总结一些js自定义的函数
2006/08/05 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python如何发布程序的详细教程
2018/10/09 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python如何读取、写入CSV数据
2020/07/28 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
python 常见的反爬虫策略
2020/09/27 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
商场拾金不昧表扬信
2014/01/13 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书