H5的本地存储
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异,如使用方法、最大存储空间等。
一、localStorage API 基本使用方法
localStorage API 使用方法简单易懂,如下为常见的 API 操作及示例: 设置数据:localStorage.setItem(key,value); 示例:
1
2
3
|
for (var i= 0 ; i< 10 ; i++){ localStorage.setItem(i,i); } |
获取数据:localStorage.getItem(key) 获取全部数据:localStorage.valueOf() 示例:
1
2
3
|
for (var i= 0 ; i< 10 ; i++){ localStorage.getItem(i); } |
删除数据:localStorage.removeItem(key) 示例:
1
2
3
|
for (var i= 0 ; i< 5 ; i++){ localStorage.removeItem(i); } |
清空全部数据:localStorage.clear() 获取本地存储数据数量:localStorage.length 获取第 N 个数据的 key 键值:localStorage.key(N)
2. 遍历 key 键值方法
1
2
3
|
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 的本地存储大小基本均有限制,一个测试的结果如下:
1
2
3
4
5
|
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 (超出则会弹出允许请求更多空间的对话框) |
测试代码参考:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<! 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 数据存储异常处理
1
2
3
4
5
6
7
8
9
10
|
try { localStorage.setItem(key,value); } catch (oException){ if (oException.name == 'QuotaExceededError' ){ console.log( '超出本地存储限额!' ); //如果历史信息不重要了,可清空后再设置 localStorage.clear(); localStorage.setItem(key,value); } } |
总结:
H5的两种存储技术的最大区别就是生命周期。localStorage是本地存储,存储期限不限;sessionStorage会话存储,页面关闭数据就会丢失。
使用方法:
localStorage.setItem(“key”,“value”)//存储
localStorage.getItem(key)//按key进行取值
localStorage.valueOf( )//获取全部值
localStorage.removeItem(key)//删除单个值
localStorage.clear()//删除全部数据
localStorage.length//获得数据的数量
localStorage.key(N)//获得第N个数据的key值
注:localStorage和sessionStorage用法相同
H5的本地存储的更多相关文章
- H5的本地存储技术及其与Cookie的比较
第一部分: H5的本地存储技术 HTML5 提供了两种在客户端存储数据的新方法.先看下面的例子: 例1:var mySelection = {name:"car", amount: ...
- 关于视频断点续播和H5的本地存储
前段时间,需要在下实现一个视频的断点续播功能,呃,我不会呀,这就很尴尬了.然后呢,在下就想起了一个叫做localStorage的东西.这是个什么东西呢?在网上查阅了一些资料后,在下发现这是webSto ...
- H5的本地存储(localStorage)和cookie比较
HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. sessionStorage就像是会话级别的cookie,数据会随着浏览器关闭而清 ...
- h5 localStorage本地存储
用户名:<input type="text" id="txtname"/> 密码:<input type="text" i ...
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- 利用H5本地存储localStorage、sessionStorage
最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...
- H5本地存储技术和微信小程序中的本地存储
1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 测试笔记:本地存储localstorage与sessionstorage
最近测试的投票项目开发说用的是localstorage.查了下是h5的本地存储.还有个sessionstorage,区别在于sessonstorage关闭页面后清空,localstorage保留. 以 ...
- H5 本地存储一
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
随机推荐
- ural 1106. Two Teams 二分图染色
链接:http://acm.timus.ru/problem.aspx?space=1&num=1106 描述:有n(n<=100)个人,每个人有一个或多个朋友(朋友关系是相互的).将其 ...
- 全栈project师?给把瑞士军刀你去砍鬼子好不好!?
来自www.techgogogo.com 编者注:本文来自Medium前三名推荐文章,发文时已经获得高达2,125个推荐,中文版由天地会珠海分舵编译.全文对当今风靡业界的"全栈xx师&quo ...
- The Arduino IDE(compiler)'s float bug
1.通常直接使用串口的print函数就ok Serial.println(DHT.humidity); //assuming DHT.humidity is float 2.但是习惯问题,还是偏好s ...
- [RxJS] Filtering operators: skipWhile and skipUntil
After takeUntil() and takeWhile() function, let's have a look on skipWhile() and skilUntil() functio ...
- Javascript --扩展String实现替换字符串中index处字符
String.prototype.replaceCharAt = function(n,c){ return this.substr(0, n)+ c + this.substr(n+1,this.l ...
- httpd cgi程序配制+.py .cgi执行
vi /etc/httpd/conf/httpd.conf httpd默认首页配制: DirectoryIndex index.html index.html.var 首页的位置定义: Docume ...
- UNIX环境高级编程第二版代码笔记
1. 第一个程序 gcc 1.1.c /tmp/ccbnJqcB.o: In function `main': 1.1.c:(.text+0x17): undefined reference to ...
- MyBatis Tutorial – CRUD Operations and Mapping Relationships – Part 1---- reference
http://www.javacodegeeks.com/2012/11/mybatis-tutorial-crud-operations-and-mapping-relationships-part ...
- Objective-C:swift、objective-c、C++、C混合编程
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...
- openmpi+NFS+NIS搭建分布式计算集群
1. 配置防火墙 正确配置防火墙的过滤规则,否则会造成NFS文件系统的挂载失败,NIS账户认证的失败,mpirun远程任务实例投放的失败.一般情况下,计算集群是在内部局域网中使用,所以可 ...