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

Web Storage实例练习

登陆/注销和计数器

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

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

执行结果如下图，点击“登陆”按钮后，输入姓名：

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

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

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

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

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

下面是代码模块：

<!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在购物车中的使用方式

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

Web Storage实例练习

登陆/注销和计数器

相关推荐