HTML5新特性之Web Storage

2023-08-11,

  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

  

HTML5新特性之Web Storage的相关教程结束。

《HTML5新特性之Web Storage.doc》

下载本文的Word格式文档,以方便收藏与打印。