HTML5本地存储详解

原创 2012年06月02日 13:33:36

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。

 HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。

1sessionStorage

检测

!!window.sessionStorage;

常用方法

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

1.	window.sessionStorage.name = 'rainman';           // 赋值  
2.	window.sessionStorage.setItem('name','cnblogs');  // 赋值  
3.	window.sessionStorage.getItem('name');            // 取值  
4.	window.sessionStorage.removeItem('name');         // 移除值  
5.	window.sessionStorage.clear();                    // 删除所有sessionStorage  

事件:

window.onstorage

检测值得变化,浏览器支持不好。

说明:

  1. cookie的存储限制在了4k之内,相比来说,session storage有了更大的存储空间,但至于具体多大,这要参照浏览器厂商的具体实现。
  2. cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而session storage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。
  3. 通过sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
  4. session storage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。
  5. setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码:setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数),而是’16’(字符串)。
  6. 再次使用setItem设置已经存在的key的value时,新的值将替代旧的值。
  7. 当存储中的数据发生改变时,会触发相应的事件(window.onstorage),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。

2localStorage

检测

!!window.localStorage;

方法和sessionStorage相同

说明:

  1. local storage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。
  2. 而且对于某一个域下来说,local storage是共享的(多个窗口共享一个“数据库”)。
  3. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

举例

1.	//结合JSON.stringify使用更强大  
2.	var person = {'name': 'rainman', 'age': 24};  
3.	localStorage.setItem("me", JSON.stringify(person));  
4.	JSON.parse(localStorage.getItem('me')).name;    // 'rainman'  
5.	  
6.	/** 
7.	 * JSON.stringify,将JSON数据转化为字符串 
8.	 *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}' 
9.	 *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]' 
10.	 * JSON.parse,反解JSON.stringify 
11.	 *     JSON.parse('["a","b","c"]')                    // ["a","b","c"] 
12.	 */  

3Database Storage

对简单的数据存储,使用sessionStoragelocalStorage能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 Web SQL Database”API 接口的应用所在。

A、打开链接

1.	var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开链接  
2.	if(!db) { alert("Failed to connect to database."); }                         // 检测连接是否创建成功  

以上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1db 还带有描述信息和大概的大小值。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立,即使过去对于某个用户它是成功的。为什么一个连接会失败,存在多个原因。也许用户代理出于安全原因拒绝你的访问,也许设备存储有限。面对活跃而快速进化的潜在用户代理,对用户的机器、软件及其能力作出假设是非常不明智的行为。比如,当用户使用手持设备时,他们可自由处置的数据可能只有几兆字节。

B、执行查询

1.	db.transaction( function(tx) {   
2.	    tx.executeSql(  
3.	        "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
4.	        ['lebel', new Date().getTime()],   
5.	        function(tx2, result){ alert('成功'); },   
6.	        function(tx2, error){ alert('失败:' + error.message); }  
7.	    );   
8.	});   

  1. 执行SQL语句使用database.transaction()函数,该函数只有一个参数,负责执行查询的函数。
  2. 该函数具有一个类型事务的参数(tx)。
  3. 该事务参数(tx)具有一个函数:executeSql()。这个函数使用四个参数:
    表示查询的SQL字符串;插入到查询中问号所在处的字符串数据;一个成功时执行的函数;一个失败时执行的函数。
  4. 执行成功的函数有两个参数:tx2,事务性参数;result,执行的返回结果,结构如图
  5. 执行成功的函数也有两个参数:tx2,事务性参数;error,错误对象,结构如图 

C、其它

  • Chrome支持; firefox(测试时版本4.01)不支持;IE8不支持。

D、示例

1.	//创建数据库  
2.	var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);   
3.	if(!db){  
4.	    alert("Failed to connect to database.");   
5.	} else {  
6.	    alert("connect to database 'K'.");   
7.	}  
8.	  
9.	// 创建表  
10.	db.transaction( function(tx) {   
11.	    tx.executeSql(  
12.	        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",   
13.	        [],   
14.	        function(){ alert('创建users表成功'); },   
15.	        function(tx, error){ alert('创建users表失败:' + error.message); }  
16.	    );  
17.	});   
18.	  
19.	// 插入数据  
20.	db.transaction(function(tx) {   
21.	    tx.executeSql(  
22.	        "INSERT INTO users (id, name) values(?, ?)",   
23.	        [Math.random(), 'space'],   
24.	        function(){ alert('插入数据成功'); },   
25.	        function(tx, error){ alert('插入数据失败: ' + error.message);}  
26.	    );   
27.	});   
28.	  
29.	// 查询  
30.	db.transaction( function(tx) {   
31.	    tx.executeSql(  
32.	        "SELECT * FROM users", [],    
33.	         function(tx, result) {  
34.	            var rows = result.rows, length = rows.length, i=0;  
35.	            for(i; i < length; i++) {   
36.	                alert(  
37.	                    'id=' + rows.item(i)['id'] +   
38.	                    'name='+ rows.item(i)['name']  
39.	                );   
40.	            }   
41.	        },   
42.	        function(tx, error){  
43.	            alert('Select Failed: ' + error.message);  
44.	        }  
45.	    );   
46.	});   
47.	  
48.	// 删除表  
49.	db.transaction(function (tx) {    
50.	    tx.executeSql('DROP TABLE users');   
51.	}); 

4globalStorage

这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,localStorage一样,域中任何一个页面存储的信息都能被所有的页面共享

基本语法

  • globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
  • globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
  • globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
  • globalStorage[''] —— 在任何域名下的任何网页都可以通过这个命名空间存储对象来进行读和写

方法属性

  • setItem(key, value) —— 设置或重置 key 值。
  • getItem(key) —— 获取 key 值。
  • removeItem(key) —— 删除 key 值。
  • 设置 key 值:window.globalStorage["planabc.net"].key = value;
  • 获取 key 值:value = window.globalStorage["planabc.net"].key;

其它

  • 过期时间同 localStorage,其它的一些特性也和localStorage相似。
  • 现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。

5、兼容性

方法

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

localStorage

4

2

8

10.50

4

sessionStorage

5

2

8

10.50

4

globalStorage

--

2

--

--

--
 

 



HTML5中的本地存储及其相关例子

简单存储HTML5HTML5 提供了四种在客户端存储数据的新方法,即localStorage 、sessionStorage、globalStorage、WebSql Database。 前面三个适用...
  • woshinannan741
  • woshinannan741
  • 2016年11月26日 15:27
  • 1325

html5本地存储

h5中提供了一种将键值对的数据保存在客户端的标准。跟cookie不同的是,它不会在每次请求服务器的时候上传至服务器(除非你自己实现该功能),因为这是h5的规范得到了浏览器的很好支持,不需额外的插件之类...
  • yueqinglkong
  • yueqinglkong
  • 2016年05月25日 23:08
  • 2601

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto...
  • hbcui1984
  • hbcui1984
  • 2013年01月05日 00:41
  • 27734

HTML5本地存储-localStorage如何实现定时存储

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 然而,今天我要说的是...
  • yqwang75457
  • yqwang75457
  • 2017年03月14日 13:52
  • 2928

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

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2015年11月09日 12:21
  • 25160

web存储 实现本地存储

本来没想看html5, 但是毛概课无意把书翻到那一页,无意中看了一点, 感觉html5真是简单易学= = 所以为什么要学html= = 不多吐槽,本地存储吧 HTML5 Web 存储 HTML...
  • migu77777
  • migu77777
  • 2016年12月01日 19:36
  • 1605

HTML5的本地存储localStorage以及简单应用

localStorage是HTML5中作为在客户端持久保存数据的方案,与cookie相比,localStorage不用在客户端与服务器之间相互传递,且可存储大量数据(2.5MB-5MB),所以应用范围...
  • ShaneQin_FE
  • ShaneQin_FE
  • 2017年02月20日 17:02
  • 800

HTML5 - Web存储使用详解(本地存储、会话存储)

1,Web存储介绍 HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种: (1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且...
  • feiying008
  • feiying008
  • 2016年08月08日 11:14
  • 2073

web本地存储(localStorage、sessionStorage)

web 本地存储 (localStorage、sessionStorage)说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:...
  • mjzhang1993
  • mjzhang1993
  • 2017年04月26日 18:38
  • 4064

深入HTML5: HTML5 本地存储( Local Storage )的前世今生 (一)

HTML5 Local Storage( 本地存储) 的前世今生原文连接:http://diveintohtml5.org/storage.html    (深入HTML5)作者:Mark Pilgr...
  • dojotoolkit
  • dojotoolkit
  • 2011年07月18日 17:39
  • 30145
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5本地存储详解
举报原因:
原因补充:

(最多只允许输入30个字)