Web Storage功能就是在Web上储存数据的功能,这里的储存是针对客户端本地而言的。具体分两种:sessionStorage和localStorage。
sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以继续使用。
将Web Storage作为简易数据库,如果能解决数据检索,对列进行管理,就可以将Web Storage作为数据库来利用了。
localStorage的使用
localStorage的保存,查询,清除使用
sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以继续使用。
将Web Storage作为简易数据库,如果能解决数据检索,对列进行管理,就可以将Web Storage作为数据库来利用了。
sessionStorage的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
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;
}
</script>
</head>
<body>
<p id="msg"></p>
<p><input type="text" name="" id="input"></p>
<p><input type="button" value="保存数据" οnclick="saveStorage('input')"></p>
<p><input type="button" value="读取数据" οnclick="loadStorage('msg')"></p>
</body>
</html>
localStorage的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
//保存数据的方法
localStorage.setItem("message",str);
}
function loadStorage(id){
var target = document.getElementById(id);
// 读取数据
var msg = localStorage.getItem("message");
target.innerHTML = msg;
}
</script>
</head>
<body>
<p id="msg"></p>
<p><input type="text" name="" id="input"></p>
<p><input type="button" value="保存数据" οnclick="saveStorage('input')"></p>
<p><input type="button" value="读取数据" οnclick="loadStorage('msg')"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function saveStorage2(id){
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已存储");
loadStorage2("msg2");
}
function loadStorage2(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 clearStorage2(){
localStorage.clear();
alert("数据已经删除");
loadStorage2("msg2");
}
function saveStorage3(){
var data = new Object;
data.name = document.getElementById("name").value;
data.emial = document.getElementById("emial").value;
data.tel = document.getElementById("tel").value;
data.memo3 = document.getElementById("memo3").value;
var str = JSON.stringify(data);
// stringify用于从一个对象解析出字符串,例如
// var a={a:1,b:2}
// 经 JSON.stringify(a)得到:
// “{“a”:1,"b":2}”
localStorage.setItem(data.name,str);
alert ("已经保存数据");
}
function findStorage(id){
var find = document.getElementById("find").value;
var str = localStorage.getItem(find);
var data = JSON.parse(str);
// .parse 用于从一个字符串中解析出json 对象。例如
// var str='{"name":"cpf","age":"23"}'
// 经 JSON.parse(str) 得到:
// Object: age:"23"
//name:"cpf"
// _proto_:Object
var result = "姓名" + data.name +"<br/>";
result += "邮箱" + data.emial +"<br/>";
result += "联系方式" + data.tel +"<br/>";
result += "备注" + data.memo3 +"<br/>";
var target = document.getElementById(id);
target.innerHTML = result;
}
</script>
</head>
<body>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<span style="white-space:pre"> </span><input type="button" name="" value="追加数据" οnclick="saveStorage2('memo')">
<span style="white-space:pre"> </span><input type="button" value="删除数据" name="" οnclick="clearStorage2()"><br/>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>email:</td>
<td><input type="emial" id="emial"></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input type="text" id="tel"></td>
</tr>
<tr>
<td>备注:</td>
<td><input type="text" id="memo3"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存" οnclick="saveStorage3()"></td>
</tr>
</table>
<hr>
<p>检索:
<input type="text" id="find">
<input type="button" value="检索" οnclick="findStorage('msg3')">
</p>
<p id="msg3"></p>
</body>
</html>