localStorage註冊頁面A註冊數據在本地儲存並在B頁面打開

時間 2019-11-12

標籤 localstorage 註冊頁面數據本地儲存打開简体版

原文原文鏈接

如題目的這麼一個問題，javascript

A頁面代碼css

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <link rel="stylesheet" href="signup.css">
  7 </head>
  8 
  9 <body>
 10 <div class="creal">
 11 <div class="title">
 12 </div>
 13 
 14     <div class="title">
 15         <h2>用戶註冊</h2>
 16     </div>
 17 <div class="container" id="dv">
 18     <div class="body">
 19         <label for="username">用戶名:</label><input name="username" type="text" id="username" placeholder="請輸入用戶名"><span></span><br/>
 20         <label for="pwd">密碼:</label><input type="password" name="pwd" id="pwd" placeholder="請輸入密碼"><span></span><br/>
 21         <label for="e-mail">郵箱:</label><input type="text" id="e-mail" placeholder="請輸入郵箱"><span></span><br/>
 22         <label for="telephone">手機號:</label><input type="text" id="telephone" placeholder="請輸入手機號"><span></span><br/>
 23         <label for="code_input">驗證碼:</label><input type="text" id="code_input" placeholder="請輸入驗證碼"><br/>
 24         <div class="button"><label><input type="submit"value="提交" id="my_button" style="width: 50px"></label></div>
 25     </div>
 26 </div>
 27     <div id="v_container" class="yzm"></div>
 28 </div>
 29 
 30 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
 31 
 32 <script src="common.js"></script>
 33 <script src="gVerify.js"></script>
 34 
 35 <script type="text/javascript">
 36   var verifyCode = new GVerify("v_container");
 37     document.getElementById("my_button").onclick = function(){
 38         var res = verifyCode.validate(document.getElementById("code_input").value);
 39         if(res){
 40             //存儲信息
 41             var _data = [$("#username").val(), $("#pwd").val(), $("#e-mail").val(), $("#telephone").val()];
 42             localStorage.setItem("data", _data);
 43             console.log(_data);
 44             alert("註冊成功");
 45             //var _data = $("#username").val() + "," + $("#pwd").val() + "," + $("#e-mail").val();
 46             window.open("123.html");
 47         }else{
 48             alert("註冊失敗");
 49         }
 50 
 51     checkuser(document.getElementById("username"),/^[a-zA-Z0-9_-]{4,16}$/);
 52     //密碼
 53     checkpwd(my$("pwd"),/^[a-zA-Z0-9_-]{4,16}$/);
 54     //郵箱
 55     checkemail(my$("e-mail"),/^[0-9a    -zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
 56     //座機號碼
 57     checktel(my$("telephone"),/^\d{7,20}$/);
 58 
 59     function checkuser(input,reg) {
 60         input.onblur=function () {
 61             if(reg.test(this.value)){
 62                 this.nextElementSibling.innerText="輸入正確";
 63                 this.nextElementSibling.style.color="green";
 64             }else{
 65                 this.nextElementSibling.innerText="用戶名有誤 請輸入4-16個英文大小寫和數字的組合";
 66                 this.nextElementSibling.style.color="red";
 67             }
 68         };
 69     }
 70 
 71     function checkpwd(input,reg) {
 72         input.onblur=function () {
 73             if(reg.test(this.value)){
 74                 this.nextElementSibling.innerText="輸入正確";
 75                 this.nextElementSibling.style.color="green";
 76             }else{
 77                 this.nextElementSibling.innerText="密碼有誤 請輸入4-16個英文大小寫和數字的組合";
 78                 this.nextElementSibling.style.color="red";
 79             }
 80         };
 81     }
 82 
 83     function checkemail(input,reg) {
 84         input.onblur=function () {
 85             if(reg.test(this.value)){
 86                 this.nextElementSibling.innerText="輸入正確";
 87                 this.nextElementSibling.style.color="green";
 88             }else{
 89                 this.nextElementSibling.innerText="輸入郵件有誤 郵件格式爲xx@xx.com";
 90                 this.nextElementSibling.style.color="red";
 91             }
 92         };
 93     }
 94 
 95     function checktel(input,reg) {
 96         input.onblur=function () {
 97             if(reg.test(this.value)){
 98                 this.nextElementSibling.innerText="輸入正確";
 99                 this.nextElementSibling.style.color="green";
100             }else{
101                 this.nextElementSibling.innerText="手機號爲11個純數字組合";
102                 this.nextElementSibling.style.color="red";
103             }
104         };
105     }
106 </script>
107 
108 </body>
109 </html>

B頁面獲取數據並顯示html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶信息</title>
</head>
<style>
    body{
        margin: 0 auto;
        width: 1060px;
        text-align: center;
    }
    h2{
        text-align: center;
    }
</style>
<body>

<h2>用戶信息</h2>
<script>
    //獲取信息
    var _data = localStorage.getItem("data", _data);

    if (localStorage.getItem("data") != null) {
         _data = _data.split(",");
        document.write("用戶名:");
        document.write("<br>");
        document.write(_data[0]);
        document.write("<br>");
        document.write("密碼:");
        document.write("<br>");
        document.write(_data[1]);
        document.write("<br>");
        document.write("郵箱:");
        document.write("<br>");
        document.write(_data[2]);
        document.write("<br>");
        document.write("座機號:");
        document.write("<br>");
        document.write(_data[3]);
        document.write("<br>");

        //清空數據
        localStorage.removeItem("data");
      }else{ 
              alert('數據不存在，請登陸')
      }

</script>
</body>
</html>

這個也能夠歸結爲是localStorage的使用方法來解決的，很困了，先寫這麼多了。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。