HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异,如使用方法、最大存储空间等。
1. 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);
} 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);
} sstr = str.slice( 0, end );
localStorage.clear();
try {
localStorage.setItem( 'cache', sstr );
limit = sstr.length;
isLeft = 0;
} catch ( e ) {
isLeft = 1;
} base = end;
off = Math.floor( off / 2 );
} 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 的遍历、存储大小限制处理的更多相关文章
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- HTML5本地缓存localStorage和sessionStorage的操作方法收集
说明: Web Storage 包含如下两种机制: sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开 ...
- web 存储方式汇总:Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application Cache,Cache Storage
1 1 1 web 存储方式汇总: 旧的方式: Cookies; Session; Web SQL; 新的方式 HTML5 : Web Storage(LocalStorage ,SessionSto ...
- js中cookie,localStorage(sessionStorage)的存取
一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...
- <<< html5本地储存
类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
随机推荐
- JavaScript基础——创建函数
JavaScript的最重要的一个部分是制作其他代码可以重用的代码.要做到这一点,你可以把代码组织成执行特定任务的函数.函数是结合在一个单一的块中,并给予一个名称的一系列代码语句.然后,你就可以通过引 ...
- sqlserver 连接远程数据库小结
A,B两个数据库,不在同一台服务器实例 当需要通过sqlserver语句来实现对远程数据库操作(OPENDATASOURCE): select * from -- 操作类型 OPENDATASOURC ...
- htop 源码安装
htop-1.0.2.tar.gz http://pan.baidu.com/s/1c1RbdIg tar -xvf htop-1.0.2.tar.gz cd htop-1.0.2 ./config ...
- 攻城狮在路上(叁)Linux(十二)--- Linux的目录与路径
一.相对路径与绝对路径: A.绝对路径:由根目录/开始写起的路径,例如 /usr/share/doc B.相对路径:不是由根目录/开始写起的路径. 二.目录的相关操作: 1.cd: 目录切换 cd ~ ...
- cordova
cordova 1.安装 nodejs => node -v2.安装 npm install -g cordova => cordova -v3.安装 jdk 环境变量:(系统变量) 新建 ...
- Visual Studio Code升级到0.5,提供对ES6的更好支持
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:题目即题记. 自从Visual Studio Code发布之后(最初是0.1),微软就 ...
- 无法打开包括文件:“windows.h”: No such file or directory
VS2012 出现如下错误: 无法打开包括文件:"windows.h": No such file or directory 解决办法,将 C:\Program Files ...
- 在Salesforce中以PDF的格式显示对应的页面
在Salesforce中可以简单设置page的属性让页面以pdf的方式显示内容, 当然了我们的page内容可以用Html的方式编写 设置方式为:renderAs="pdf" 请看如 ...
- AndroidStudio里面怎么取消与SVN的关联
在公司做项目 遇到SVN解除关联的问题 后经过解决: 1.解除文件的关联方法: 1.1. 创建一个reg文件 如下 1.2 在文件中填入如下内容并保存: Windows Registry Editor ...
- pig的各种运行模式与运行方式详解
一.pig的运行模式: Pig 有两种运行模式: Local 模式和 MapReduce 模式.当 Pig 在 Local 模式运行的时候, Pig 将只访问本地一台主机:当 Pig 在 MapRed ...