数据存储方案:
Web项目中需要存储多种数据,大体上有两种存储方法:
(1)服务器端存储:
1)数据库技术:存储项目中的核心数据
2)Session技术:存储当前用户的信息
(2)客户端存储:不太紧要的与客户端有关的数据,如浏览记录、内容定制、样式定制
1)Cookie技术:使用比较繁琐、大小不能超过4KB
2)Flash技术:逐渐被淘汰
3)HTML5WebStorage技术:使用简单,大小不超过8MB
4)IndexedDB技术:客户端直接存储对象,目前还不是HTML标准技术
Web会话:指客户端浏览器从连接到某个Web服务器开始,一系列的请求-响应过程。直到客户端关闭浏览器,会话结束。 |
HTML5的WebStorage技术,提供了两个对象,用于在浏览器中存储客户端的访问数据:
window.sessionStorage——会话级存储:
在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器),会话级数据即消失。
sessionStorage['key'] = 'value'; //存储一个数据
var v = sessionStorage['key']; //读取一个数据
sessionStorage.length //获取数据的个数
sessionStorage.setItem('key', 'value') //存储一个数据
var v = sessionStorage.getItem('key') //读取一个数据
sessionStorage.removeItem('key') //删除一个数据
sessionStorage.clear() //清除所有的数据
window.localStorage——本地/跨会话级存储:
在客户端文件系统/硬盘中存储客户端与服务器间的访问数据——都是Key-Value对形式。即使关闭浏览器,甚至关闭计算机仍然存在,否则会永久存在。
localStorage['key'] = 'value'; //存储一个数据
var v = localStorage ['key']; //读取一个数据
localStorage.length //获取数据的个数
localStorage.setItem('key', 'value') //存储一个数据
var v = localStorage.getItem('key') //读取一个数据
localStorage.removeItem('key') //删除一个数据
localStorage.clear() //清除所有的数据
练习:
(1)创建index.html,右上角有一个超链接“登录”,点击此链接跳转到login.html,用户在表单中输入登录信息,点击“提交按钮”,假设用户名和密码都正确,弹出提示“登录成功”,3秒钟跳转回首页,右上角显示出“欢迎回来:xxx 退出登录”;此时若用户在地址栏强行输入login.html,直接跳转到index.html;用户若点击了index.html上的退出登录超链接,则跳转到logout.html,提示出“您已退出登录”,3秒钟跳回index.html,继续显示“登录”超链接
setTimeout(function(){
location.href="";
},3000)
代码如下:
10_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
header{
text-align: right;
padding:1em;
border-bottom:1px solid #aaa;
}
</style>
</head>
<body>
<header>
<a href="10_login.html">登录</a>
</header>
<section>
<h3>首页</h3>
</section>
<script>
var n=sessionStorage['LoginName'];
if(n){
//若用户已经登录,则需要修改header中的内容
var header=document.querySelector('header');
header.innerHTML=`欢迎回来:${n}<a href="10_logout.html">退出登录</a>`;
}
</script>
</body>
</html>
10_login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
header{
text-align: right;
padding:1em;
border-bottom:1px solid #aaa;
}
</style>
<script>
//若用户已经登录,则无需再看到此页面
var n=sessionStorage['LoginName'];
if(n){
location.href='10_index.html';
}
</script>
</head>
<body>
<section>
<h3>用户登录</h3>
<hr>
用户名: <input type="text" id="uname"> <br>
密 码: <input type="text" id="upwd"> <br>
<input type="button" id="btSubmit" value="提交登录信息">
<script>
btSubmit.onclick=function () {
var n=uname.value;
var p=upwd.value;
//此处应该执行异步的登录信息验证
alert("登录成功,3秒钟后跳转回首页");
//保存当前登录的用户名,可以供后续的其他页面使用
sessionStorage['LoginName']=n;
setTimeout(function () {
location.href='10_index.html';
},3000);
}
</script>
</section>
</body>
</html>
10_logout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>退出登录</h3>
<p>退出登录成功!3秒后将跳转回首页......</p>
<script>
//清除用户的登录信息
sessionStorage.removeItem('LoginName');
// sessionStorage.clear();
setTimeout(function () {
location.href='10_index.html';
},3000);
</script>
</body>
</html>
(2)实现一个页面主题的永久定制
创建index.html,指定3个class
.blue { background: #ccf; color: #339; }
.pink { background: #f3b; color: #916; }
.dark { background: #111; color: #eee; }
提供一个下拉选择框,“—请选择您喜欢的页面主题—”,“湛蓝天空”、“芭比公主”、“杀马特”,选择某项之后,当前页面的body就使用对应的className。
跳转到usercenter.html,默认也呈现出index.html中选中的页面主题,即使重启浏览器,仍可以呈现出之前选中的主题色。提示:即使重新打开index.html,也要显示出之前选中的主题色。
代码如下:
12_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.blue{
background:#ccf;
color:#339;
}
.pink{
background:#f3b;
color:#916;
}
.dark{
background:#111;
color:#eee;
}
</style>
</head>
<body>
<script>
var theme=localStorage['UserTheme'];
if(theme){
document.body.className=theme;
}
</script>
<h3>首页</h3>
<select name="" id="selectTheme">
<option value="0">请选择您喜欢的页面主题</option>
<option value="blue">湛蓝天空</option>
<option value="pink">芭比公主</option>
<option value="dark">杀马特黑</option>
</select>
<hr>
<p>sadfjla nfjdkjgoi dfjoiarjgfnvnffdvkfl</p>
<a href="12_usercenter.html">跳转到用户中心</a>
<script>
selectTheme.onchange=function () {
var theme=this.value;
document.body.className=theme;
//在客户端浏览器中保存选择的主题---磁盘中
localStorage['UserTheme']=theme;
}
</script>
</body>
</html>
12_usercenter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.blue{
background:#ccf;
color:#339;
}
.pink{
background:#f3b;
color:#916;
}
.dark{
background:#111;
color:#eee;
}
</style>
</head>
<body>
<h3>用户中心</h3>
<hr>
<p>sdjfolhgd dsfkjhrlgw dfdkjsglrg fsnjdgkf</p>
<a href="12_index.html">跳转回首页</a>
<script>
var theme=localStorage['UserTheme'];
document.body.className=theme;
</script>
</body>
</html>
课后练习: 单词测试系统
(1)用户可以在save.html中不停的录入新单词;
(2)进入test.html开始测试,需要对之前录入过的所有单词进行测试;
(3)提交答案后,在result.html中显示出测试成绩。
提示:录入的单词需要永久保存;而此次测试结果只需要在当前会话中保存。
//遍历客户端存储的数据
for(var i=0; i<localStorage.length; i++){
var key = localStorage.key(i) //获取第i个key
var value = localStorage[key]; //获取第i个value
}