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)  编辑  收藏  举报

导航