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. python scapy 网卡抓包

    首先需要安装scapy包,点击下载 from scapy.all import * def pack_callback(packet): print packet.show() if packet[' ...

  2. KMP Demo

    The key of Kmp is to build a look up table that records the match result of prefix and postfix. Valu ...

  3. 698. Partition to K Equal Sum Subsets

    Given an array of integers nums and a positive integer k, find whether it's possible to divide this ...

  4. MySQL中整型和字符串类型指定长度的含义

    引入: int(5)和char(5)或者varchar(5)中的数字指的是什么意思?是字节数,还是字符长度?为什么在整型中指定了int(5)却可以输入123456? 答案是后者,不管是整型还是字符串类 ...

  5. linux下oracle数据库字符集修改

    linux下oracle数据库字符集修改 0.RHEL6.7.oracle11gr2 1.登录oracle.在安装oracle的用户下进入数据库. $ sqlplus / as sysdba 2.查询 ...

  6. 《JAVA与模式》之不变模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述不变(Immutable)模式的: 一个对象的状态在对象被创建之后就不再变化,这就是所谓的不变模式. 不变模式的结构 不变模式可增强对象的 ...

  7. Go语言学习笔记(2)——变量、常量

    1. 变量(变量由字母.数字和下划线组成,且不能以数字开头!)      1.1 第一种 var name type // 未赋值时使用默认值 name = value 1.2 第二种: 根据所赋的值 ...

  8. java 中break 和continue 的非常规用法

    正常情况下,break只能断掉最近的循环.(比如二个嵌套的for循环中 ,第二个循环的break.不会中断第一个for循环) 问题是: 嵌套中 如果要断掉任意其中的循环怎么做? 答案是: 加一个lab ...

  9. notepad++中设置python运行

    1. Notepad++ ->"运行"菜单->"运行"按钮 2. 在弹出的窗口内输入以下命令: cmd /k python "$(FULL ...

  10. linux安装tmux

    由于tmux依赖于libevent和ncurses-devel,所以应首先有这两个库,和相关的头文件. 1.对于ncurses-devel,可用yum安装. yum install ncurses-d ...