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 （超出则会弹出允许请求更多空间的对话框）

测试代码参考：

<!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);
}
}

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等的更多相关文章

  1. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  2. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  3. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  4. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  5. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  6. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  7. HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性

    localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...

  8. HTML5本地存储应用sessionStorage和localStorage

    在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定. html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数 ...

  9. HTML5本地存储localStorage、sessionStorage及IE专属UserData

    By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...

随机推荐

  1. UWP开发---嵌套DataTemplate&模板选择器

    对于Json结构体items不完全一致的情况下,在UWP平台是如何处理数据,并通过不同的模板选择,进行显示呢? 一,嵌套Json分析 1,结构 通过抓取index的API(点击请求API)获取到的js ...

  2. Day 8 集合与文件的操作

    一.创建集合两种方式. 二.添加元素的方式(add.update"属于迭代添加") 一.集合# 1. 集合是无序的,不能重复的.# 2.集合内元素必须是可哈希的.# 3.集合不能更 ...

  3. Access 2010 应用基础 单元三：SQL查询

    导语:Access查询中拉差距的部分 简单查询 [是基于单个表的查询] 无条件从数据表中选择部分字段 Select 字段列表 from 数据表 无条件从数据表中选择全部字段 Select 字段列表 f ...

  4. Exploit之初识Linux下缓冲区溢出

    本文的目的不是为了介绍如何进行恶意的破坏性活动,而是为了教会你如何去防御此类破坏性活动,以帮助你扩大知识范围,完善自己的技能,如有读者运用本文所学技术从事破坏性活动,本人概不负责. 0×01 前言 1 ...

  5. [JavaScript] js获取当前页面url网址信息

    在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblog ...

  6. js面试题-数组去重

    今天,在聊天群里看到数组去重的话题,面试者的答案如下: 参考答案如下: 程序员思维,做出如下测试: 未考虑到:1,‘1’是不同的,应该不去重 未考虑到对象 所以,参考答案只能去重基础类型 根据以往看过 ...

  7. 【GDKOI2016】 魔卡少女 线段树

    题目大意:给你一个长度为n的序列${a_1....a_n}$,有$m$次操作 每次操作有两种情况:修改$a_i$的值,询问$[l,r]$中所有子区间的异或和. 数据范围:$n,m≤10^5$,$a_i ...

  8. AngularJS常用Directives实例

    在第一篇 认识AngularJS 中,我们已经基本了解了AngularJS,对Directive也有了一定了解,本章我们将继续介绍Directive,对其有一个更深入的了解和掌握. 常用的Direct ...

  9. (转) Linux(Centos7)yum安装最新mysql

    原文:http://blog.csdn.net/gebitan505/article/details/54613549 环境 CentOS 7.1 (64-bit system) MySQL 5.6. ...

  10. Java之IO(十二)CharArrayReader和CharArrayWriter

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7082668.html 1.前言 本章介绍字符数组流,作用和ByteArrayInputStream字节数组流相同 ...