在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定.
html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数据存储,这两者有什么特点呢?
sessionStorage
sessionStorage属于临时会话,数据存储的有效期为:从页面打开到页面关闭的时间段,属于窗口的临时存储,页面关闭,本地存储消失
localStorage
- 永久存储(可以手动删除数据)
- 存储量限制 ( 5M )
- 客户端完成,不会请求服务器处理
- sessionStorage数据在页面之间不能共享、 而localStorage可以实现页面之间共享
sessionStorage的应用:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 window.onload = function(){
8 var aInput = document.getElementsByTagName('input');
9 aInput[0].onclick = function(){
10 //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
11 window.sessionStorage.setItem("name", aInput[3].value );
12 };
13 aInput[1].onclick = function(){
14 alert(window.sessionStorage.getItem("name" ));
15 };
16 aInput[2].onclick = function(){
17 window.sessionStorage.removeItem("name" );
18 };
19 }
20 </script>
21 </head>
22 <body>
23 <input type="button" value="设置" />
24 <input type="button" value="获取" />
25 <input type="button" value="删除" />
26 <br/>
27 <input type="text" />
28 </body>
29 </html>
localStorage的应用
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 window.onload = function(){
8 var aInput = document.getElementsByTagName('input');
9 aInput[0].onclick = function(){
10 //localStorage : 永久性存储
11 window.localStorage.setItem("name", aInput[3].value);
12 window.localStorage.setItem("name2", 'aaaaa');
13 };
14 aInput[1].onclick = function(){
15 alert( window.localStorage.getItem( "name" ) );
16 alert( window.localStorage.getItem( "name2" ) );
17 };
18 aInput[2].onclick = function(){
19 window.localStorage.removeItem("name");
20 // window.localStorage.clear();
21 };
22 }
23 </script>
24 </head>
25 <body>
26 <input type="button" value="设置" />
27 <input type="button" value="获取" />
28 <input type="button" value="删除" />
29 <br/>
30 <input type="text" />
31 </body>
32 </html>
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 window.onload = function () {
8 var aInput = document.getElementsByTagName("input");
9 var oT = document.querySelector("textarea");
10
11 if (window.localStorage.getItem("userName")) {
12 aInput[0].value = window.localStorage.getItem("userName");
13 }
14
15 for (var i = 0; i < aInput.length; i ) {
16 if (window.localStorage.getItem('sex') == aInput[i].value) {
17 aInput[i].checked = true;
18 }
19 }
20
21 if (window.localStorage.getItem("note")) {
22 oT.value = window.localStorage.getItem("note");
23 }
24
25 window.onunload = function () {
26 if (aInput[0].value) {
27 window.localStorage.setItem("userName", aInput[0].value);
28 }
29
30 for (var i = 0; i < aInput.length; i ) {
31 if (aInput[i].checked == true) {
32 window.localStorage.setItem('sex', aInput[i].value);
33 }
34 }
35
36 if (oT.value) {
37 window.localStorage.setItem('note', oT.value);
38 }
39 }
40 }
41 </script>
42 </head>
43 <body>
44 <p>
45 用户名: <input type="text"/>
46 </p>
47
48 <p>
49 性别: <br/>
50 <input type="radio" name="sex" value="男"/>男
51 <input type="radio" name="sex" value="女"/>女
52 </p>
53
54 <p>
55 备注:
56 <textarea cols="30" rows="10"></textarea>
57 </p>
58
59 </body>
60 </html>