html5本地存储（一）------ web Storage

在html5中与本地存储相关的两个相关内容：Web Storage  与本地数据库

web Storage存储机制是对html4中的cookie存储机制的一个改善。web Storage就是在web上存储数据的功能（针对客户端本地），使用它可以再客户端本地建立一个数据库，这样可以存储页面内容在本地，还加快了访问数据的速度。

web Storage分两种：sessionStorage   与  localStorage

一、sessionStorage

sessionStorage为临时保存，将数据存在session对象中，当浏览器关闭，保存的内容也就消失。

二、localStorage

localStorage为永久保存，将数据保存在客户端本地的硬件设备（硬盘），即使浏览器关闭了，数据任然存在，下次打开该浏览器访问网站时任然可以继续使用

 

两种方法的保存数据与读取数据的示例，请狠狠的点击这里
使用localStorage方法来制作简单的web留言本，查看效果请狠狠的点击这里

代码展示

 1 <script type="text/javascript">
 2     function saveStorage(id) {
 3     var data = document.getElementById(id).value;
 4     var time = new Date().getTime();
 5     localStorage.setItem(time, data);
 6     alert("数据已保存。");
 7     loadStorage('msg');
 8     }
 9 
10     function loadStorage(id) {
11     var result = '<table border="1">';
12     for(var i = 0; i < localStorage.length; i++) {
13         var key = localStorage.key(i);
14         var value = localStorage.getItem(key);
15         var date = new Date();
16         date.setTime(key);
17         var datestr = date.toGMTString();
18         result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
19         }
20     result += '</table>';
21     var target = document.getElementById(id);
22     target.innerHTML = result;
23     }
24 
25     function clearStorage() {
26     localStorage.clear();
27     alert("全部数据被清除。");
28     loadStorage('msg');
29     }
30     </script>
31 
32     <h1>简单Web留言本</h1>
33     <textarea id="memo" cols="60" rows="10"></textarea><br>
34     <input type="button" value="追加" οnclick="saveStorage('memo');">
35     <input type="button" value="初始化" οnclick="clearStorage('msg');">
36     <hr>
37     <p id="msg"></p>
38 
39     

View Code

 

使用localStorage方法来制作简易数据库，查看效果请狠狠点击这里

代码展示

 1 <script type="text/javascript">
 2     window.onload = function(){
 3     var btn1 = document.getElementById("btn1");
 4     var btn2 = document.getElementById("btn2");
 5                 
 6     btn1.onclick = function(){
 7         saveStorage()
 8     }
 9     btn2.onclick = function(){
10         findStorage('msg')
11     }
12     }
13             
14     function saveStorage(){
15     var data = new Object;
16     data.name = document.getElementById('name').value;
17     data.email = document.getElementById("email").value;
18     data.tel = document.getElementById("tel").value;
19     data.memo = document.getElementById("memo").value;
20     var str = JSON.stringify(data);
21     localStorage.setItem(data.name,str);
22      alert("数据以保存")
23     }
24     function findStorage(id){
25     var find = document.getElementById("find").value;
26     var str = localStorage.getItem(find);
27     var data = JSON.parse(str);
28     var resule = "姓名:"+ data.name + '<br>';
29     resule += "emial:" + data.email+'<br>';
30     resule += "电话:" + data.tel +'<br>';
31     resule += "备注:"+ data.memo;
32     var target = document.getElementById(id);
33     target.innerHTML = resule;
34     }
35 </script>
36 
37 <table border="" cellspacing="" cellpadding="">        
38     <tr>
39     <td>姓名</td>
40     <td><input type="text" name="" id="name" value="" /></td>
41     </tr>
42     <tr>
43     <td>email</td>
44     <td><input type="text" name="" id="email" value="" /></td>
45     </tr>
46     <tr>
47     <td>电话号码</td>
48     <td><input type="text" name="" id="tel" value="" /></td>
49     </tr>
50     <tr>
51     <td>备注</td>
52     <td><input type="text" name="" id="memo" value="" /></td>
53     </tr>
54     <tr>
55     <td></td>
56     <td><input type="button" name="" id="btn1" value="保存" /></td>
57     </tr>
58 </table>
59 <br /><br />
60 <p>
61     检索名字<input type="text" name="find" id="find" value="" />
62 </p>
63 <input type="button" name="btn2" id="btn2" value="检索" />
64 <div id="msg"></div>

View Code

 

转载于:https://www.cnblogs.com/qqing/p/6820592.html