HTML5新特性之Web Storage

  Web Storage是HTML5新增的特性,能够在本地浏览器存储数据,对数据的操作很方便,最大能够存储5M。

  Web Storage有两种类型: SessionStorage 和 LocalStorage。SessionStorage是在浏览器打开的时间内保存数据,当关闭网页的时候数据随之丢弃。LocalStorage保存的数据不会随着网页和浏览器的关闭而消失,它会保存在本地,当网页再次打开的时候,数据依然存在。

  

  Web Storage有四种常用的方法:

  getItem("Key");      //获得数据

  setItem("Key",value);    //存储数据

  removeItem("Key");    //删除数据

  clear();          //批量删除数据

 

  应用例子:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="text" id="text1">
 9     <input type="button" value="session_set" onclick="save_session()">
10     <input type="button" value="session_get" onclick="load_session()">
11     <br>
12     <input type="text" id="text2">
13     <input type="button" value="local_set" onclick="save_local()">
14     <input type="button" value="local_get" onclick="load_local()">
15     <script>
16         function save_session(){
17             var target=document.getElementById("text1");
18             var str=target.value;
19             sessionStorage.setItem("text_message",str);
20         }
21         function load_session(){
22             var str=sessionStorage.getItem("text_message");
23             alert(str);
24         }
25         function save_local(){
26             var target=document.getElementById("text2");
27             var str=target.value;
28             localStorage.setItem("text_message",str);
29         }
30         function load_local(){
31             var str=localStorage.getItem("text_message");
32             alert(str);
33         }
34     </script>
35 </body>
36 </html>

  链接地址:http://1.huizit1.applinzi.com/HTML5/web_storage/webstorage.html

  

posted on 2016-04-22 23:56  辉子t1  阅读(348)  评论(0编辑  收藏  举报

导航