如何保存文本格式日期保存在 session

Question

我将表单数据保存在 javascript 会话中，每个值在提交表单后我都得到了正确的值。 但是当我点击返回我的表单时，日期格式没有保存我在提交时间填写的正确日期格式。

15/11/1992 日期格式（当我提交表单时工作正常/）15,11,1992（当我重新加载页面时在 session 中获取此值）

"use strict";

//*********************  get and set details ******************
function getDetails(){
    if (typeof(Storage)!=="undefined"){
        if (sessionStorage.getItem("fName") !== null){   
            document.getElementById("fName").value = sessionStorage.getItem("fName");   
        }
        if (sessionStorage.getItem("lName") !== null){   
            document.getElementById("lName").value = sessionStorage.getItem("lName");   
        }
        if (sessionStorage.getItem("dob") !== null){   
            document.getElementById("dob").value = sessionStorage.getItem("dob");   
        }
        if (sessionStorage.getItem("gender") !== null){   
            document.getElementById("gender").value = sessionStorage.getItem("gender"); 
        }
        if (sessionStorage.getItem("street_address") !== null){   
            document.getElementById("street_address").value = sessionStorage.getItem("street_address"); 
        }
        if (sessionStorage.getItem("town") !== null){   
            document.getElementById("town").value = sessionStorage.getItem("town"); 
        }

        if (sessionStorage.getItem("state") !== null){   
            document.getElementById("state").value = sessionStorage.getItem("state");   
        }
        if (sessionStorage.getItem("postcode") !== null){   
            document.getElementById("postcode").value = sessionStorage.getItem("postcode"); 
        }
        if (sessionStorage.getItem("phone") !== null){   
            document.getElementById("phone").value = sessionStorage.getItem("phone");   
        }
        if (sessionStorage.getItem("other") !== null){   
            document.getElementById("other").value = sessionStorage.getItem("other");   
        }
        if (sessionStorage.getItem("otherText") !== null){   
            document.getElementById("otherText").value = sessionStorage.getItem("otherText");   
        }


    }
}

function setDetails(fName, lName, dob,gender,street_address,town,state,postcode,phone,other,otherText) {
    if (typeof(Storage)!=="undefined"){
        sessionStorage.setItem("fName", fName);
        sessionStorage.setItem("lName", lName);
        sessionStorage.setItem("dob", dob);
        sessionStorage.setItem("gender", gender);
        sessionStorage.setItem("street_address", street_address);
        sessionStorage.setItem("town", town);
        sessionStorage.setItem("postcode", postcode);
        sessionStorage.setItem("phone", phone);
        sessionStorage.setItem("other", other);
        sessionStorage.setItem("otherText", otherText);
    }
}
//*********************  get and set Job Ref ******************
function setJobRef (jobRefNumber){
    if(typeof(Storage)!=="undefined"){
        localStorage.setItem("jobRef", jobRefNumber);
    }
}

function getJobRef (){
    if(typeof(Storage)!=="undefined"){
        if (localStorage.getItem("jobRef") !== null) {
            var jobRef= document.getElementById("jobRef");
            jobRef.value = localStorage.getItem("jobRef");
        }   
    }
}
//*********************  validate ******************
function validate() {
    var errMsg="";
    var result=true;

    var fName=document.getElementById("fName").value;
    var lName=document.getElementById("lName").value;
    var dob = document.getElementById("dob").value.split("/");
        var date = new Date(dob[2], parseInt(dob[1]) - 1, dob[0]);
        var today = new Date();
        var age = today.getFullYear() - date.getFullYear();
    var gender = document.getElementById("gender").value;
    var street_address = document.getElementById("street_address").value;
    var town = document.getElementById("town").value;
    var postcode = document.getElementById("postcode").value;
    var phone=document.getElementById("phone").value;
    var state = document.getElementById("state").options[document.getElementById("state").selectedIndex].text;
    var other = document.getElementById("other").checked;
    var otherText  = document.getElementById("otherText").value;
    if (fName=="") {
        errMsg += "Please enter your first name.<br>";
        result=false;
    }
    if (lName=="") {
        errMsg += "Please enter your last name.<br>";
        result=false;
    }
    if (dob=="") 
    {
        errMsg += "Please enter your date of birth.<br>";
        result=false;
    }
    if (age >= 80) 
    { // Outside age ranges.
    errMsg +="You must be 80 or younger to apply for this job\n";
    result = false;
    }

    if (age <= 15) 
    { // Outside age ranges.
    errMsg += "You must be 15 or older to apply for this job\n";
    result = false;
    }

    var regex;
 //VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
 switch (state) {
    case "Please Select":
        return false;
    case "VIC":
        regex = new RegExp(/(3|8)\d+/);
        break;
     case "NSW":
        regex = new RegExp(/(1|2)\d+/);
        break;
     case "QLD":
        regex = new RegExp(/(4|9)\d+/);
        break;
     case "NT":
        regex = new RegExp(/0\d+/);
        break;
     case "WA":
        regex = new RegExp(/6\d+/);
        break;
     case "SA":
        regex = new RegExp(/5\d+/);
        break;
     case "TAS":
        regex = new RegExp(/7\d+/);
        break;
     case "ACT":
        regex = new RegExp(/0\d+/);
        break;
 }
 if(!postcode.match(regex)){
   errMsg += "State and postcode do not match\n";
   result = false;
 }
    if (other && document.getElementById("otherText").value.trim().length===0) 
    {
    errMsg += "You have selected other skills, you must enter one other skill in the text box\n";
    result = false;
    }
    //  more validation here   

    if (errMsg!="") 
        document.getElementById("err").innerHTML=errMsg;
    else {    // no error, save data to storage
        setDetails(fName,lName,dob,gender,street_address,town,state,postcode,phone,other,otherText);
    }
    return result;  
}
//*********************  init  ******************

function init() {
    if (document.getElementById("applyPage")!=null) {  // apply page init
        getJobRef();
        getDetails();
        document.getElementById("applyForm").onsubmit = validate;

    }
    else if (document.getElementById("positionPage")!=null) { // position page init

        var applylinks=document.getElementsByClassName("applylink");  // array
        for (var i=0; i<applylinks.length; i++)
            applylinks[i].onclick = function () { setJobRef(this.id); }
    }
}
window.onload = init;  


***HTML****


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Student personal detail" />
  <meta name="keywords" content="Peronal Details of volunteer or student," />
  <meta name="author" content="Name student "  />

<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
<script src="my.js"></script>
<title>Apply to Voulnteer</title>

</head>

<body id="applyPage">
    <div id="leftsidebar">
       <!-- menu -->
    <header id="header">
        <h1>Imagine a world free from Cancer. Help make it a reality.</h1>
        <div id="menu">
         <ul>

            <li><a href="index.html">Home</a></li>
            <li><a href="position.html">Positions</a></li>
            <li><a href="apply.html">Apply Now</a></li>
            <li><a href="detail.html">Details</a></li>
            <li><a href="enhancements.html">Enhancements</a></li>
        </ul>
        </div>
    </header>
     <!-- menu end -->


<!-- right hand side content  -->

<aside class="rightnews">
    <span class="style3">Current Happenings</span><br />
    <img src="images/bullet.gif" alt="blue" width="19" height="16" /><br /> <br />  
    <a href=""><img src="images/cancer_awareness_month.jpeg" alt="cancer_awareness_month" width="130" height="95" /></a><br /><br />
    <a href=""><img src="images/breast_cancer.png" alt="breast cancer" width="130" height="93" /></a><br /><br />
    <a href=""><img src="images/month.jpeg" alt="awareness_month" width="130" height="99" /></a>
    <br />
</aside> 

<!-- right hand side content end  -->


<!-- left hand side content  -->

<aside id="f">
    <h2 >About Volunteering:</h2>

    <div class="leftnews">

    <img src="images/Vol3.png" alt="blue" style="width: 140px;height: 100px;"><br />
       As an Melbourne Red Cross volunteer you can honor a survivor or a loved one lost to cancer, help save lives of people in your local community, and around the world. It only takes a little time to do a lot of good. Discover how rewarding it is to be a volunteer.
        <br />
      <br />
    </div>
</aside>

<!-- left hand side content end -->


<!-- center side content  -->


<div id="content"><br/><br/>
  <h2 class="style7">Apply Now</h2> 
  <div class="style3">
     <form id="applyForm" method="post" action="https://mercury.swin.edu.au/it000000/formtest.php">
    <p id="err"></p>
    <p><label for = "jobRef">Job Reference Number: </label>
    <input  name= "jobRef" id="jobRef"  readonly/></p>

    <p><label for = "fName">First Name: </label>
    <input  name= "fName" id="fName" /></p>

    <p><label for = "lName">Last Name: </label>
    <input  name= "lName" id="lName" /></p>

    <p><label for="dob">*Date of Birth:</label>
            <input type="text" name="dob" id="dob" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" maxlength="10" size="10"/></p>

    <p id="err"></p>
    <fieldset>
      <legend>Gender:</legend>
      <input type = "radio" name = "gender" id="gender" value = "male"> Male
            <input type = "radio" name = "gender" id="gender" value = "female"> Female
        </fieldset>
        <br>
          <label for="street"> Street Address:</label><br>

         <input type="text" name="street_address"  id="street_address" required pattern="[A-Za-z]{1,40}">
          <br>
           <label for="town"> Suburb/Town </label><br>

          <input type="text" name="town" id="town" required pattern="[A-Za-z]{1,40}">
    <p><label for="state">*State:</label>
            <select name="state" id="state" required="required">
            <option value="">Please Select</option>         
            <option value="WIC">WIC</option>
                     <option value="NSW">NSW</option>
                     <option value="QLD">QLD</option>
                     <option value="NT">NT</option>
                     <option value="WA">WA</option>
                     <option value="SA">SA</option>
                     <option value="TAS">TAS</option>
                     <option value="ACT">ACT</option>
          </select>
    <p id="err"></p>
        </p>

          <p><label for="postcode">*Postcode:</label>
            <input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required="required" />

    </p>
            <label for="phone"> Phone Number </label><br>
        <input type="tel" name="phone" maxlength="12" pattern="[0-9]{8,12}" id="phone" />
          <br>

            <p>Skill list:</p>
          <p><label for="Dancing">Dancing</label>
            <input type="checkbox" id="Dancing" name="skills[]" checked="checked" value="Dancing" /></p>
          <p><label for="Singing">Singing</label>
            <input type="checkbox" id="Singing" name="skills[]" value="Singing" /></p>


          <p><label for="other">Other Skills:</label>
            <input type="checkbox" id="other" name="skills" /></p>
          <textarea id="otherText" name="other" rows="8" cols="70" placeholder="Please write any other skills you may have here..."></textarea>

    <p><input type= "submit" value="Apply"/>
    <input type= "reset" value="Reset"/></p>

  </form>
    </div>
  <br>

</div>

<!-- right hand side content  -->

<!-- Footer  -->

<div id="footer">Copyright © 2019 Melbourne Red Cross Society</div>


<!--footer end  -->

</div>
</body>
</html>

Answer 1

如果您指的是“dob”字段，我个人不会尝试将其存储为日期 object。 根据我的经验，当您的用户与您的服务器处于不同的时区时，这可能会导致问题。 人们没有输入他们出生时间的时间戳，他们输入的是日历日。 所以即使我在我所在的时区是 1 月 1 日出生，而当时在你所在的时区是 12 月 31 日，你也不会说我的生日是 12 月 31 日。 您真正关心的是日、月和年。

另请注意，将 session 存储属性存储在列表中会更干净，然后像这样遍历列表：

function getDetails(){
    if (typeof(Storage)==="undefined"){
        return; // return early to avoid code clutter
    }

    let properties = ['fName', 'lName', 'dob', 'blah', 'blah', 'blah'];

    properties.forEach(p => {
        if (sessionStorage.getItem(p) !== null){   
            document.getElementById(p).value = sessionStorage.getItem(p);   
        }
    });
}