Web前端开发学习之路——网页存储Web Storage（二） - 好文

Web Storage实例练习

登陆/注销和计数器

利用localStorage数据保存的特性，我们可以做一个登陆/注销的界面并统计用户的进站次数。

* 当用户点击“登陆”按钮时，会出现“请输入你的名字”的文本框让用户输入姓名。
* 单击“提交”按钮后，将名字存储到localStorage
* 重载页面，将进入网站次数存储于localStorage，并将用户姓名以及进站次数显示在<div>标记中
* 单击“注销”按钮后，<div>标记显示已注销，并清空localStorage
执行结果如下图，点击“登陆”按钮后，输入姓名：

刷新网页后我们可以看到我们的访问次数在变化...

点击“注销”按钮后，会清除localStorage...

下面是代码模块：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>WebStorage实例练习</title> <link rel="stylesheet" type="text/css"
href="color.css"> <script type="text/javascript"> function onLoad() {
inputSpan.style.display='none';/*隐藏输入框和提交按钮*/ if(typeof(Storage)=="undefined")
{ alert("Sorry！！你的浏览器不支持Web Storage") } else {
/*先判断名字是否已经存入了localStorage,已存入时才执行{}的命令*/ if(localStorage.username) {
/*localStorage.counter数据不存在时返回undefined*/ if(!localStorage.counter) {
localStorage.counter=1;/*初始值设定为1*/ } else { localStorage.counter++;/*次数加1*/ }
btn_login.style.display='none';/*隐藏“登陆”按钮*/ show_LocalStorage.innerHTML
=localStorage.username+" 你好，这是你第"+localStorage.counter+"次来到网站"; }
btn_login.addEventListener("click",login);
btn_send.addEventListener("click",sendok);
btn_logout.addEventListener("click",clearLocalStorage); } } function login() {
inputSpan.style.display='';/*显示姓名输入框和“提交”按钮*/ } function sendok() {
localStorage.username=inputname.value; location.reload();/*重载网页*/ } function
clearLocalStorage() { localStorage.clear();
show_LocalStorage.innerHTML="你已成功注销！"; btn_login.style.display='';/*显示“登陆”按钮*/
inputSpan.style.display='';/*显示姓名输入框和“提交”按钮*/ } </script> </head> <body
onload="onLoad()"> <button id="btn_login">登陆</button> <button
id="btn_logout">注销</button><br/> <img src="images/w1.jpg"/><br/> <span
id="inputSpan">请输入你的姓名：<input type="text" id="inputname" value=""><button
id="btn_send">提交</button></span><br/> <div id="show_LocalStorage"></div><br/>
</body> </html>
下一篇中将会练习Web Storage在购物车中的使用方式

热门工具换一换