Web Storage概述
在html5中,除了canvas元素之外,另一个新增的非常重要的功能是可以在客户本地保存数据的web storage功能,之前可以使用cookies在客户端保存诸如用户名等简单的信息,但是通过长期的使用,人们发现用cookies储存永久数据存在几个问题。
-大小:cookies的大小被限制在4kb
-带宽:cookies是随http事务一起被发送的,因此会浪费一部分发送coolies时使用的带宽
-复杂性:正确的操作cookies是很困难的。
针对以上问题,html5中,重新提供了一种在客户端本地保存数据的功能,他就是web storage功能
顾命思议,web storage功能就是web上面储存数据的功能,这里的储存是针对客户端本地而言的,具体分两种:
sessionStorage: 将数据保存在session对象中,session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,数据仍然存在,下一次打开浏览器访问网站时仍然可以继续使用。
代码如下:
sessionStorage:(只要关闭本页面就不再存贮,不是必须整个浏览器)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web1</title>
<script src="appWeb1.js"></script>
</head>
<body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick=saveStorage('input')>
<input type="button" value="读取数据" onclick=loadStorage('msg')>
</body>
</html>
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代码之变换js的存储方式
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;
}
简单Web留言板
代码如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web1</title>
<script src="appWeb2.js"></script>
</head>
<body>
<p id="msg"></p>
<textarea id="memo" cols="60" rows="10"></textarea>
<br>
<!--<input type="text" id="input">-->
<input type="button" value="追加数据" onclick=saveStorage('memo')>
<input type="button" value="删除数据" onclick=clearStorage()>
</body>
</html>
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 +="</tabel>";
var target = document.getElementById(id);
target.innerHTML = result;
}
function clearStorage() {
localStorage.clear();
alert("数据已经删除");
loadStorage('msg');
}
作为简单数据库来利用
将Web Storage作为简易数据库,如果能解决数据检索,对列进行管理,就可以将Web Storage作为数据库来利用了。
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单数据库</title>
<script src="appWeb3.js"></script>
</head>
<body>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name"></td>
</tr><br>
<tr>
<td>Email:</td>
<td><input type="text" id="email"></td>
</tr><br>
<tr>
<td>电话号码:</td>
<td><input type="text" id="tel"></td>
</tr><br>
<tr>
<td>备注:</td>
<td><input type="text" id="memo"></td>
</tr><br>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="saveStorage()"></td>
</tr>
</table>
<hr>
<p>检索
<input type="text" id="find">
<input type="button" value="检索" onclick="findStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>
js代码如下
function saveStorage() {
var data = new Object;
data.name = document.getElementById("name").value;
data.email = document.getElementById("email").value;
data.tel = document.getElementById("tel").value;
data.memo = document.getElementById("memo").value;
var str = JSON.stringify(data);
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);
var result = "name: "+data.name + "<br>";
result += "email: "+data.email + "<br>";
result += "tel: "+data.tel + "<br>";
result += "memo: "+data.memo + "<br>";
var target = document.getElementById(id);
target.innerHTML = result;
}