首页 > 代码库 > html5本地存储（一）------ web Storage
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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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="http://www.mamicode.com/追加" onclick="saveStorage(‘memo‘);">
35 <input type="button" value="http://www.mamicode.com/初始化" onclick="clearStorage(‘msg‘);">
36 <hr>
37 <p id="msg"></p>
38
39
使用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 = http://www.mamicode.com/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 =http://www.mamicode.com/ 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="http://www.mamicode.com/保存" /></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="http://www.mamicode.com/检索" /> 64 <div id="msg"></div>
html5本地存储（一）------ web Storage
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。