问如何使用会话存储自动填写表单？
EN

Stack Overflow用户

提问于 2021-10-03 08:02:31

回答 2查看 252关注 0票数 2

<label for="streetname">Street Address</label>
<input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />

function getBooking() {
  if (sessionStorage.fname != undefined) {
    document.getElementById("confirm_fname").textContent = sessionStorage.fname;
    document.getElementById("confirm_lname").textContent = sessionStorage.lname;
    document.getElementById("confirm_email").textContent = sessionStorage.email;
    document.getElementById("confirm_phone").textContent = sessionStorage.phone;
    document.getElementById("confirm_start").textContent = sessionStorage.start;
    document.getElementById("confirm_streetname").textContent = sessionStorage.streetname;
    document.getElementById("confirm_suburb").textContent = sessionStorage.suburb;
    document.getElementById("confirm_state").textContent = sessionStorage.state;
    document.getElementById("confirm_postcode").textContent = sessionStorage.postcode;
    document.getElementById("confirm_skill").textContent = sessionStorage.skill;
    document.getElementById("confirm_other").textContent = sessionStorage.other;
    document.getElementById("confirm_otherbox").textContent = sessionStorage.otherbox;
    
    
    document.getElementById("a_fname").value = sessionStorage.fname;
    document.getElementById("a_lname").value = sessionStorage.lname;
    document.getElementById("a_email").value = sessionStorage.email;
    document.getElementById("a_phone").value = sessionStorage.phone;
    document.getElementById("a_start").value = sessionStorage.start;
    document.getElementById("a_streetname").value = sessionStorage.streetname;
    document.getElementById("a_suburb").value = sessionStorage.suburb;
    document.getElementById("a_state").value = sessionStorage.state;
    document.getElementById("a_postcode").value = sessionStorage.postcode;
    document.getElementById("a_skill").value = sessionStorage.skill;
    document.getElementById("a_other").value = sessionStorage.other;
    document.getElementById("a_otherbox").value = sessionStorage.otherbox;
  }
 }

如果用户已经在同一浏览器会话中填写了表单，那么如何使用外部JavaScript文件使用会话存储来自动填充表单？如果表单被正确验证，我已经有了将值存储在会话存储中的代码，那么我将如何处理呢？

如果需要更多或更少的信息，请告诉我。

注:请勿使用jQuery或内联Javascript。

html

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-10-03 08:54:06

sessionStorage和localStorage都有用于检索数据的getItem函数和存储数据的setItem函数。

还有其他一些有用的功能。

所以，在这种情况下，你似乎需要：

document.getElementById("a_fname").value = sessionStorage.getItem("fname");

其他人也一样。

有关更多信息，请查看这。

票数 1

Stack Overflow用户

发布于 2021-10-03 13:14:38

您需要寻找localStorage方法: getItem(key)、setItem(key，value)。有点晚但有一件事我注意到了。也许这对你的例子还是有帮助的。如果有这么多的元素，我会通过一个循环来完成。例如：

<div id="confirm_fname">First Name</div>
<div id="confirm_lname">Last Name</div>
<div id="confirm_email">Email</div>
...

<script>
const keyNames = [
  {k1: 'confirm_fname', k2: 'fname'},
  {k1: 'confirm_lname', k2: 'lname'},
  {k1: 'confirm_email', k2: 'email'}
]

keyNames.map(function (key) {
  sessionStorage.setItem(key.k2, Math.random()); // set to localStorage  
  document.getElementById(key.k1).textContent = sessionStorage.getItem(key.k2); // get from localStorage
})
</script>