本地存儲給我未定義

Question

我一直在創建一個表單，在我輸入我的值並提交之后，我想在另一個頁面上顯示數據這是我的表單：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/checkout.css">
<p id="Header">Checkout page</p>
<div class="row">
  <div class="col-75">
    <div class="containeer">
      {{!-- When fom submitted, transport to here --}}
      <form id="form" action="receipt" style="checkout.css">
      
        <div class="row">
          <div class="col-50">
            <h3>Billing Address</h3>
            {{!-- Name --}}
            <label for="name"><i class="fa fa-user"></i> Full Name*</label>
            <input class="form-control" type="text" placeholder="Example: Chia Kai Jun" id="name" required />

            <label for="email"><i class="fa fa-envelope"></i> Email*</label>
            <input class="form-control" type="email" id="email" placeholder="Example: john@example.com" required />
            
            <label for="adr"><i class="fa fa-address-card-o"></i> Address (Street, Block, Unit Number)*</label>
            <input class="form-control" type="text" id="adr" name="address" placeholder="Example: Ang Mo Kio Street 69, Blk106P, #07-212" required />

            <div class="row">
              <div class="col-50">
                <label for="zip">Zip*</label>
                <input class="form-control" 
                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                {{!-- Javascript code needed here to prevent using text --}}
                pattern="\d*" maxlength="6" type="number" id="zip" name="zip" placeholder="Example: 123456" required />
              </div>
            </div>
          </div>

          <div class="col-50">
            <h3>Payment</h3>
            {{!-- Available credit cards to use with image --}}
            <label for="fname">Accepted Cards</label>
            <div class="icon-container">
              <i class="fa fa-cc-visa" style="color:navy;"></i>
              <i class="fa fa-cc-mastercard" style="color:red;"></i>
            </div>
            
            <label for="cname">Name on Card*</label>
            <input class="form-control" type="text" id="cname" name="cardname" required />
            
            <label for="ccnum">Credit card number*</label>
            <input class="form-control" type="text" maxlength="19" id="ccnum" name="cardnumber" placeholder="Example: 1111-2222-3333-4444"required />
                        
            <div class="row">
              <div class="col-50">
                <label for="expyear">Exp Month and Year*</label>
                <input class="form-control" type="month" id="expyear" name="expyear" required />
              </div>
              <div class="col-50">
                <label for="cvv">CVV*</label>
                <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                type="password" id="cvv" name="cvv" pattern="\d*" minlength="3" maxlength="3" required />
              </div>
            </div>
          </div>
          
        </div>
        {{!-- Will link to thank you for purchase, but now link to base for testing --}}
        <button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button><span id="hi">* - Must be filled in</span>
    </div>
  </div>
  <div class="col-25">
    <div class="container">
      <h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i></span></h4>
      {{!-- Will be currently empty if nothing and have items if something there --}}
      <p id="item">Thinkpad Laptop - $100</p>
      <img class="card-img-top p-5" src="/images/laptop.png" id="laptopimage">
      <hr>
      <p id="price" value="$100">Total: $100 <span class="price" style="color:black"></span></p>
      {{!-- Will display nothing if there are no items and will compute total cost if there are items --}}
    </div>
  </div>
</div>
</form>
<script>
function submitForm(){
  let name = document.forms["form"]["name"].value;
  let email = document.forms["form"]["email"].value;
  let address = document.forms["form"]["address"].value;
  let zip = document.forms["form"]["zip"].value;
  let test = document.forms["form"]["test"].value;
  if (name == "") and (email == "") and (address == "") and (zip == "") and (test == ""){
    return false;
  }
  else if(typeof(localStorage) != "undefined"){
    localStorage.name = document.getElementById("name").value;
    localStorage.email = document.getElementById("email").value;
    localStorage.adr = document.getElementById("adr").value;
    localStorage.zip = document.getElementById("zip").value;
    localStorage.test = document.getElementById("test").value;
  }
  document.getElementById("form").submit();
}
</script>

這是我顯示數據輸入的地方：

    .yeet{
        font-size: 25px;
        line-height: 200%;
        padding: 40px;
    }
    .intro{
        text-align: center;
    }
</style>
<div class="intro">
<h1>Thank you for your purchase!</h1>
<h2>Please check that your checkout details are correct</h2>
</div>
<body onload="setData()">
<div class="yeet">
Name: <span id="name"></span><br>
Email: <span id="email"></span><br>
Address: <span id="adr"></span><br>
Zip: <span id="zip"></span><br>
Item: <span id="cvv"></span><br>
</div>
<script>
function setData(){
    if(typeof(localStorage) != "undefined"){
        document.getElementById("name").innerHTML = localStorage.name;
        document.getElementById("email").innerHTML = localStorage.email;
        document.getElementById("adr").innerHTML = localStorage.adr;
        document.getElementById("zip").innerHTML = localStorage.zip;
        document.getElementById("cvv").innerHTML = localStorage.cvv;
    }
}
</script>
</body>

我想在輸入后顯示的值當前是姓名、電子郵件、地址、ZIP 和 CVV。 當我的其他值正確時，我的 CVV 給我未定義。 我不知道為什么

Answer 1

從 localStorage 設置和獲取數據 -

localStorage.setItem('variable_name', 'value');
localStorage.getItem('variable_name');

Answer 2

請嘗試執行此代碼。

  <script>
        function setData(){
           if(typeof(Storage) !== "undefined"){
                document.getElementById("name").innerHTML = localStorage.name;
                document.getElementById("email").innerHTML = localStorage.email;
                document.getElementById("adr").innerHTML = localStorage.adr;
                document.getElementById("zip").innerHTML = localStorage.zip;
                document.getElementById("cvv").innerHTML = localStorage.cvv;
            }
        }
        </script>

為什么我們要檢查這個條件，有些瀏覽器不支持 Web Storage

   if(typeof(Storage) !== "undefined")

Answer 3

我發現了我的問題，我的 </form 被錯誤地放置了。 抱歉並感謝所有幫助過的人！