Web存储
html5可以在本地存储用户浏览的数据，数据的存储原理是以 键/值 存储的
存储对象分类
- localStorage：没有时间限制的数据存储
- sessionStorage：针对一个会话的数据存储
常用的API
（以localStorage为例，sesstionStorage同理）
- 保存数据：localStorage.setIterm(key,value);
- 读取数据：localStorage.getIterm(key);
- 移除单个数据：localStorage.removeIterm(key);
- 移除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
- 点击计数：localStorage.clickcount();
实例（能够记忆用户的密码和账号）：
<!DOCTYPE html>
<html>
<head>
<title>登 录 页 面</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
div{border:2px groove #ddd};
</style>
</head>
<body onload = "loadAll()">
<form action = "afterlogin.jsp">
<div>
name:<input type = "text" name = "user" id = "user" onblur = "read()"><br>
password:<input type = "password" name = "pw" id = "pw"><br>
<input type = "checkbox" onclick = "choice()" name = "rem" id = "rem"><span id = "res">永远记住我</span><br>
</div>
<br>
登录：<input type = "image" src = "nexview.gif" width = "20px" height = "20px"alt = "Submit" title = "Submit" onclick= "save()">
</form>
<br>
<button onclick = "count()">点我</button>计数：<span id = "count"></span>
<div id = "list"></div>
<script>
function count(){
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("count").innerHTML="你已经点击了该按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("count").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
function choice(){
var cb = document.getElementById("rem");
if(cb.value != "1"){
cb.value = "1";
document.getElementById("res").innerHTML = "忘记我";
}else{
cb.value = "0";
document.getElementById("res").innerHTML = "永远记住我";
}
}
function save(){
//判断用户是否选择了记住用户名和密码
if(document.getElementById("rem").value = "1"){
//创建一个对象
var info = new Object;
//获得用户输入的值
info.user = document.getElementById("user").value;
info.pw = document.getElementById("pw").value;
//将对象转化为字符串
var str = JSON.stringify(info);
//将数据存储到localStorage中
localStorage.setItem(info.user,str);
}
}
function read(){
//获得用户输入的名称
var user = document.getElementById("user").value;
//通过用户用户名获得存储数据的对象
var str = localStorage.getItem(user);
//将对象转化为字符串
var sstr = JSON.parse(str);
var spw = document.getElementById("pw");
spw.value = sstr.pw;
}
//将所有存储在loadStorage中的对象提取出来
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>用户</td><td>密码</td></tr>";
for(var i=0;i<localStorage.length;i++){
//依次获得每一个对象
var user = localStorage.key(i);
var str = localStorage.getItem(user);
//将对象转化为字符串
var sstr = JSON.parse(str);
result += "<tr><td>"+user+"</td><td>"+sstr.pw+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空...";
}
}
</script>
</body>
</html>Web存储和jsp内置对象简单比较
相同点：
- 都可以作为一个容器来存网页中的数据
不同点：
- Web存储用于HTML（静态网页）中，而JSP内置对象用于jsp（动态网页）中。
- Web存储只有两种类型（localStorage、sessionStorage）， JSP的内置对象有十多个（application、session、request、config、exception、out、response、pageContext、page…..）。