HTML5 localStorage and sessionStorage

忘是亡心i 2021-10-08 06:52 328阅读 0赞

TML5 提供两种web存储方法，localStorage 与 sessionStorage

**localStorage 与 sessionStorage 区别**

localStorage没有过期时间，只要不clear或remove，数据会一直保存。

sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

**特点：**

**1.**localStorage 默认支持的容量为一个站5M，当调用setItem超过上限时，会触发QuotaExceededError异常。当然有些浏览器支持修改容量上限，但为了兼容其他浏览器，最好按5M的容量来使用。

**2.**localStorage 是以key-value形式保存数据的，key和value只能是字符串格式。因此数字1保存后，会转换成字符串1。

**3.**localStorage 的写入与读取写法有以下几种：

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  localStorage.name = 'fdipzone';  
2.  name = localStorage.name;  
3.    
4.  localStorage\['name'\] = 'fdipzone';  
5.  name = localStorage\['name'\];  
6.    
7.  localStorage.setItem('name', 'fdipzone');  
8.  name = localStorage.getItem('name');

localStorage\[key\] = value写法主流浏览器都支持，官方并没有说明那一种写法是标准。但如果执行以下的代码就使localStorage失效。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  localStorage.setItem = **null**;  
2.  localStorage.getItem = **null**;  
3.  localStorage.removeItem = **null**;  
4.  localStorage.clear = **null**;

因此，建议使用setItem(), getItem(), removeItem(), clear()来实现写入，读取，删除，清空。

**4.**如果要保存非字符串的内容，建议使用JSON来处理。写入数据时用JSON.stringify转成字符串，读取数据时用JSON.parse把字符串转为之前的格式。

**例子1：**

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****meta** http-equiv="content-type" content="text/html; charset=utf-8"**>**  
5.    **<****title****>** Local Storage and Session Storage **</****title****>**  
6.   **</****head****>**  
7.    
8.   **<****body****>**  
9.    **<****p****>**姓名:**<****input** type="text" name="name" id="name"**>****</****p****>**  
10.   **<****p****>**性别:**<****input** type="radio" name="gender" id="gender1" value="1"**>** 男 **<****input** type="radio" name="gender" id="gender2" value="2"**>** 女**</****p****>**  
11.   **<****p****>****<****input** type="button" id="saveBtn" value="save"**>** **<****input** type="button" id="getBtn" value="get"**>** **<****input** type="button" id="removeBtn" value="remove name"**>** **<****input** type="button" id="clearBtn" value="clear"**>** **</****p****>**  
12.   
13.   **<****script** type="text/javascript"**>**  
14.     var oStorage = window.localStorage;  
15.   
16.     function $(id)\{  
17.         return document.getElementById(id);  
18.     \}  
19.   
20.     // 保存数据  
21.     $('saveBtn').onclick = function()\{  
22.         oStorage.setItem('name', $('name').value);  
23.   
24.         if($('gender1').checked==true)\{  
25.             oStorage.setItem('gender', 1);  
26.         \}else if($('gender2').checked==true)\{  
27.             oStorage.setItem('gender', 2);  
28.         \}  
29.     \}  
30.   
31.     // 获取数据  
32.     $('getBtn').onclick = function()\{  
33.         $('name').value = oStorage.getItem('name');  
34.         if(oStorage.getItem('gender')==1)\{  
35.             $('gender1').checked = true;  
36.         \}else if(oStorage.getItem('gender')==2)\{  
37.             $('gender2').checked = true;  
38.         \}  
39.     \}  
40.   
41.     // 删除数据name  
42.     $('removeBtn').onclick = function()\{  
43.         oStorage.removeItem('name');  
44.     \}  
45.   
46.     // 清空数据  
47.     $('clearBtn').onclick = function()\{  
48.         oStorage.clear();  
49.     \}  
50.   
51.   **</****script****>**  
52.   
53.  **</****body****>**  
54. **</****html****>**

**例子2：**使用 JSON.stringify 和 JSON.parse 封装数据

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****meta** http-equiv="content-type" content="text/html; charset=utf-8"**>**  
5.    **<****title****>** Local Storage and Session Storage **</****title****>**  
6.   **</****head****>**  
7.    
8.   **<****body****>**  
9.    **<****p****>**姓名:**<****input** type="text" name="name" id="name"**>****</****p****>**  
10.   **<****p****>**性别:**<****input** type="radio" name="gender" id="gender1" value="1"**>** 男 **<****input** type="radio" name="gender" id="gender2" value="2"**>** 女**</****p****>**  
11.   **<****p****>****<****input** type="button" id="saveBtn" value="save"**>** **<****input** type="button" id="getBtn" value="get"**>** **<****input** type="button" id="clearBtn" value="clear"**>** **</****p****>**  
12.   
13.   **<****script** type="text/javascript"**>**  
14.     var oStorage = window.localStorage;  
15.   
16.     function $(id)\{  
17.         return document.getElementById(id);  
18.     \}  
19.   
20.     // 保存数据  
21.     $('saveBtn').onclick = function()\{  
22.         var name = $('name').value;  
23.         var gender;  
24.         if($('gender1').checked==true)\{  
25.             gender = 1;  
26.         \}else if($('gender2').checked==true)\{  
27.             gender = 2;  
28.         \}  
29.   
30.         var data = \{\};  
31.         data\['name'\] = name;  
32.         data\['gender'\] = gender;  
33.   
34.         oStorage.setItem('data', JSON.stringify(data));  
35.     \}  
36.   
37.     // 获取数据  
38.     $('getBtn').onclick = function()\{  
39.         var data = JSON.parse(oStorage.getItem('data'));  
40.   
41.         if(data)\{  
42.             var name = data\['name'\];  
43.             var gender = data\['gender'\];  
44.   
45.             $('name').value = name;  
46.   
47.             if(gender==1)\{  
48.                 $('gender1').checked = true;  
49.             \}else if(gender==2)\{  
50.                 $('gender2').checked = true;  
51.             \}  
52.         \}  
53.     \}  
54.   
55.     // 清空数据  
56.     $('clearBtn').onclick = function()\{  
57.         oStorage.clear();  
58.     \}  
59.   
60.   **</****script****>**  
61.   
62.  **</****body****>**  
63. **</****html****>**

**监听localStorage的值，当发生变化时同步页面数据**

当调用setItem(), removeItem(), clear() 时，可以监听这些事件，方便不同的页面之间更新数据。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // 监听数据变化,当数据发生变化时,同步数据显示  
2.  window.onstorage = **function**(event)\{  
3.      **var** status = \{\}  
4.      status.key = event.key;  
5.      status.oldValue = event.oldValue;  
6.      status.newValue = event.newValue;  
7.      status.url = event.url;  
8.      status.storage = event.storageArea;  
9.    
10.     // 执行同步数据处理...  
11. \}

[view plain]: http://blog.csdn.net/fdipzone/article/details/25517615/#