点击登录，跳转到登录页面后，登录成功后，自动跳转到起始页面，这时候登录按钮变成你的账户名，这要怎么做?

点击登录，登陆成功，自动跳转到起始页面，这要怎么做？

泽枫

613115

发布于
2016-03-31

更新于
2016-03-31

✓ 已被采纳

先介绍下登录过程，然后介绍代码如何做。
登录过程
下面这个页面是起始页面，因为我已经测试过了，所以这里会显示我的用户名

点击按钮跳转到登录页面，输入用户名，密码，然后点击登录(注意这里我们的用户名是:segment)

页面会跳转到起始页面，并且会显示我们刚才的用户名

起始页面设计--goTo-demo.html
主要代码如下：

<body>
    <div>
        <p>登录返回后下面显示你的登录用户名</p>
        <p><botton onclick="login()">点击跳转登录</botton></p>
        <p>当前用户名是：<span id="username"></span></p>
    </div>
</body>
<script type="text/javascript">
    var username = document.getElementById("username");
    window.onload = function(){
        if(localStorage.username.length>1){
            username.innerHTML = localStorage.username; //给标签加用户名
        }
    }
    function login(){
        // 构造返回链接
        var returnUrl = "returnUrl=goTo-demo.html";
        var Url = "goToLogin-demo.html" + "?" + returnUrl;
        location.href = Url;
    }
</script>

登录页面设计--goToLogin-demo.html
主要代码如下：

 <body>
   <h3>页面登录</h3>
   <div>
       <span>用户名：</span>
       <input type="text" id="username">
   </div>
   <div>
       <span>密  &nbsp;码：</span>
       <input type="password" id="password">
   </div>
   <botton onclick="login()">登录</botton>
</body>
<script type="text/javascript">
   function login(){
       var username = document.getElementById('username').value;
       var password = document.getElementById('password').value;
       // 用户名和密码都不为空
       if(username&&password){
           localStorage.username = username;
           var url = location.search.split("=")[1];
           location.href = url; //从地址栏获取返回地址，实现跳转
       }

   }
</script>

demo地址：http://yulei521.github.io/segmentFault_q...