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

1,Web存储介绍
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种:
(1)本地存储,对应  localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
(2)会话存储,对应  sessionStorage 对象。用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。

2,本地存储与会话存储的异同
(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
(2)本地存储主要用来保存访客将来还能看到的数据。
(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。

3,Web存储容量限制
大多数浏览器都把本地存储限制为  5MB 以下。这个是和网站所在的域联系在一起的。

4,Web存储的使用样例
下面以本地存储( localStorage)为例,会话存储改成  sessionStorage 对象即可。

(1)文本数据的保存和读取
1
2
3
localStorage.setItem( "user_name" , "hangge.com" );
 
var  userName = localStorage.getItem( "user_name" );

(2)数值的保存和读取
1
2
3
localStorage.setItem( "user_age" ,100);
 
var  userAge = Number(localStorage.getItem( "user_age" ));

(3)日期的保存和读取
1
2
3
4
5
6
7
8
9
10
//创建日期对象
var  today =  new  Date();
 
//按照YYY/MM/DD的标准格式把日期转换成文本字符串,然后保存为文本
var  todayString = today.getFullYear() +  "/"  + today.getMonth() +  "/"  + today.getDate();
localStorage.setItem( "session_started" , todayString);
 
//取得日期文本,并基于该文本创建新的日期对象
var  newToday =  new  Date(localStorage.getItem( "session_started" ));
alert(newToday.getFullYear());

(4)自定义对象的保存和读取
对象的保存和读取可以通过JSON编码转换来实现。
JSON.stringify() :把任何对象连同其数据转换为文本形似。
JSON.parse() :把文本转换回对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//自定义一个User对象
function  User(n, a, t) {
     this .name = n;
     this .age = a;
     this .telephone = t;
}
 
//创建User对象
var  user =  new  User( "hangge" , 100,  "123456" );
//将其保存为方便的JSON格式
sessionStorage.setItem( "user" , JSON.stringify(user));
 
//跳转页面
//window.location = "hangge.html";
 
//将JSON文本转回原来的对象
var  user2 = JSON.parse(sessionStorage.getItem( "user" ));
alert(user2.name);

(5)检测某个键的值是否为空,可以直接测试是否等于null
1
2
3
if (localStorage.getItem( "user_name" ) ==  null ){
     alert( "用户名不存在!" );
}

(6)删除数据项
1
localStorage.removeItem( "user_name" );

(7)清除所有数据
1
localStorage.clear();

(8)查找所有的数据项
不知道键名,可以使用  key()  方法从本地或者会话存储中取得所有的数据项。下面样例,点击按钮后就会列出所有本地存储中的数据。
HTML5 - Web存储使用详解(本地存储、会话存储)_第1张图片
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
     "utf-8" >
     Find All Items
 
    
 
    
    
    "itemList" >
    

5,响应存储变化
Web存储也为我们提供了在不同浏览器窗口间通信的机制。也就是说在本地存储或会话存储发生变化时,其他查看同一页面或者同一站点中其他页面的窗口就会触发  window.onStorage  事件。
这里说的存储变化,指的是向存储中添加新数据项,修改既有数据项,删除数据项或者清除所有数据。而对存储不产生任何影响的操作(用既有键名保存相同的值,或者清除原本就是空的存储空间),不会引发 onStorage  事件。

下面同时打开两个页面,在页面1中修改数据项,页面2会响应  onStorage  事件,并报告结果。
HTML5 - Web存储使用详解(本地存储、会话存储)_第2张图片

HTML5 - Web存储使用详解(本地存储、会话存储)_第3张图片

--- page1.html ---
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
   "utf-8" >
   Page1
  
  
 
  
     Local Storage
     for = "key" >Key:
     "key" >
     for = "item" >Value:
     "item" >
    
    
  
--- page2.html ---
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
   "utf-8" >
   Page2
  
  
  
"updateMessage" >No updates yet.

原文出自: www.hangge.com   转载请保留原文链接: http://www.hangge.com/blog/cache/detail_1066.html

你可能感兴趣的