一.WebStorage概述(本地保存数据)
1.WebStorage功能:在Web上储存数据的功能。
2.分为两种
(1)sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间。session对象可用来保存在这段时间内所要求保存的任何数据。
(2)localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以继续使用。eg.登录名,密码
以上两种都可用清空cookie来清空它们的内容
3.sessionStorage的例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="sessionStorage.js"></script>
</head>
<body>
<p id="msg"></p>
<input id="input" type="text">
<input type="button" value="保存数据" οnclick="saveStorage('input')">
<input type="button" value="读取数据" οnclick="loadStorage('msg')">
</body>
</html>
sessionStorage.js
function saveStorage(id) {
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
}
function loadStorage(id) {
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}
而localStorage的例子只需将上述例子中的sessionStorage改成localStorage即可。
二.简单的Web留言本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单Web留言本</title>
<script src="appWeb2.js"></script>
</head>
<body>
<p id="msg"></p>
<textarea id="memo" cols="60" rows="10"></textarea> <br/>
<input type="button" value="追加数据" οnclick="saveStorage('memo')">
<input type="button" value="删除数据" οnclick="clearStorage()">
</body>
</html>
appWeb2.js
function saveStorage(id) {
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已储存")
loadStorage('msg');// 将储存的数据显示出来
}
function loadStorage(id) {
var result = "<table border='1'>";
for(var i = 0;i < localStorage.length;i++){
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
result += "<tr><td>" + value + "</td><td>" + date + "</td></tr>";
}
result += "</table>";// 这里并不是有序添加
var target = document.getElementById(id);
target.innerHTML = result;
}
function clearStorage() {
localStorage.clear();
alert("数据已经清空");
loadStorage('msg');// 将清空数据后的效果显示出来
}
三.作为简单数据库来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作为简单数据库来利用</title>
<script src="saveAndSearch.js"></script>
</head>
<body>
<table>
<tr>
<td>姓名:</td>
<td><input id="name" type="text"></td>
</tr>
<tr>
<td>邮件:</td>
<td><input id="email" type="text"></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input id="phone" type="text"></td>
</tr>
<tr>
<td>备注:</td>
<td><input id="memo" type="text"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存" οnclick="saveStorage()"></td>
</tr>
</table>
<hr><!-- 横线 -->
<p>请输入要检索的名字:<input id="search" type="text"> <input type="button" value="检索" οnclick="searchStorage('search')"></p>
检索结果:<p id="msg"></p>
</body>
</html>
saveAndSearch.js
function saveStorage() {
var data = new Object;
data.name = document.getElementById("name").value;
data.email = document.getElementById("email").value;
data.phone = document.getElementById("phone").value;
data.memo = document.getElementById("memo").value;
// 已JSON的形式保存
var str = JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("数据已保存");
}
function searchStorage(id) {
var search = document.getElementById(id).value;
var str = localStorage.getItem(search);/*此处获取的是JSON数据*/
var data = JSON.parse(str);
var result = "姓名:" + data.name + "<br/>";
result += "邮件:" + data.email + "<br/>";
result += "电话号码:" + data.phone + "<br/>";
result += "备注:" + data.memo + "<br/>";
var target = document.getElementById("msg");
target.innerHTML = result;
}