Fatal编程技术网
  • javascript/
  • Javascript 如何在表单中存储数据，以便在页面刷新时仍填充字段

Javascript 如何在表单中存储数据，以便在页面刷新时仍填充字段

javascript jquery forms

Javascript 如何在表单中存储数据，以便在页面刷新时仍填充字段,javascript,jquery,forms,local-storage,Javascript,Jquery,Forms,Local Storage,我不熟悉S.O和javascript。我正在为一个电子商务网站做最后一年的项目，在将表单中的数据保存到本地存储方面遇到了死胡同。我的代码在下面，我真的不知道哪里出了问题。感谢所有的帮助 window.onload=function（）{ //检查本地存储支持。 if（本地存储）{ //填充表单字段 populateForm（）； //拿到表格 var form=document.getElementById（“表单”）； //提交预订表单时的事件侦听器。 表格.附录列表（“提交”，功能（e）{

我不熟悉S.O和javascript。我正在为一个电子商务网站做最后一年的项目，在将表单中的数据保存到本地存储方面遇到了死胡同。我的代码在下面，我真的不知道哪里出了问题。感谢所有的帮助

window.onload=function（）{
//检查本地存储支持。
if（本地存储）{
//填充表单字段
populateForm（）；
//拿到表格
var form=document.getElementById（“表单”）；
//提交预订表单时的事件侦听器。
表格.附录列表（“提交”，功能（e）{
保存数据（表格）；
});
}
}
//将表单数据保存在LocalStorage中。
函数saveData（）{
//获取sava（数据）
var fran_name=document.getElemenyById（“fran_name”）；
var name=document.getElemenyById（“名称”）；
var address1=document.getElemenyById（“address1”）；
var address2=document.getElemenyById（“address2”）；
var city=document.getElemenyById（“城市”）；
var pcode=document.getElemenyById（“pcode”）；
var phone=document.getElemenyById（“电话”）；
//存储值
setItem（“fran_name”，fran_name.value）；
setItem（“name”，name.value）；
localStorage.setItem（“address1”，address1.value）；
localStorage.setItem（“address2”，address2.value）；
localStorage.setItem（“city”，city.value）；
setItem（“pcode”，pcode.value）；
localStorage.setItem（“phone”，phone.value）；
}
//尝试使用存储在LocalStorage中的数据填充表单。
函数populateForm（）{
//获取输入元素。
var fran_name=document.getElemenyById（“fran_name”）；
var name=document.getElemenyById（“名称”）；
var address1=document.getElemenyById（“address1”）；
var address2=document.getElemenyById（“address2”）；
var city=document.getElemenyById（“城市”）；
var pcode=document.getElemenyById（“pcode”）；
var phone=document.getElemenyById（“电话”）；
//检索保存的数据并更新表单的值。
if（localStorage.getItem（“fran_name”）！=null）{
name.value=localStorage.getItem（“fran_name”）；
}
if（localStorage.getItem（“name”）！=null）{
phone.value=localStorage.getItem（“名称”）；
}
if（localStorage.getItem（“address1”）！=null）{
email.value=localStorage.getItem（“address1”）；
}
if（localStorage.getItem（“address2”）！=null）{
email.value=localStorage.getItem（“address12”）；
}
if（localStorage.getItem（“城市”）！=null）{
email.value=localStorage.getItem（“城市”）；
}
if（localStorage.getItem（“pcode”）！=null）{
email.value=localStorage.getItem（“pcode”）；
}
if（localStorage.getItem（“电话”）！=null）{
email.value=localStorage.getItem（“电话”）；
}
}
window.onload=函数（）{
if（本地存储）{
//填充表单字段
大众形式（形式）；
}
}

特许经营权名称


名称


地址


电话号码
主要问题是，检查控制台是否存在此错误：

未捕获引用错误：
localstorage
未定义

更改代码。它是
localStorage
，而不是
localStorage
。那是大写的
s

这是个大错误。它是
getElementById
而不是
getElemenyById
：

  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");
你的错误太多了<代码>元素！=<代码>元素

看起来这正在阻止代码执行：

  if (localStorage.getItem("address1") != null) {
    email.value = localStorage.getItem("address1");
  }
  if (localStorage.getItem("address2") != null) {
    email.value = localStorage.getItem("address12");
  }
  if (localStorage.getItem("city") != null) {
    email.value = localStorage.getItem("city");
  }
  if (localStorage.getItem("pcode") != null) {
    email.value = localStorage.getItem("pcode");
  }
  if (localStorage.getItem("phone") != null) {
    email.value = localStorage.getItem("phone");
  }
您没有名为
email
的变量。此外，您正在尝试设置未定义元素变量
email
的值，该变量没有名为
value
的属性，该属性阻止所有脚本执行。

首先，不是在您使用的代码中：

document.getElemenyById(...);
localstorage.setItem()
而不是（注意元素与元素，s与s）：

至于完整的解决方案：

您可以使用各种本地存储器在浏览器中存储此数据。 当页面即将重新加载时，可以执行以下操作：

window.onbeforeunload = function() {
    var fran_name = document.getElementById("fran_name"); 
    var name = document.getElementById("name");
    // ...

    localStorage.setItem("fran_name", fran_name.value);
    localStorage.setItem("name", name.value);
    // ...
}

localstorage
是同步工作的，因此在这里可以工作

在页面加载时，您可以检查：

window.onload = function() {

    var name = localStorage.getItem(name);
    if (name !== null) document.getElemenyById("name").value = name;

    // ...
}
如果数据不存在，
getItem
将返回null`

如果要临时存储，请使用
sessionStorage
而不是
localStorage
，直到浏览器关闭

这是您的表单的简化版本，包含完整的工作代码。将其另存为.html文件：

<html>
    <head>
        <script type="text/javascript">
            // For saving data:
            window.onbeforeunload = function() {
                var name = document.getElementById("name");
                // ...
                localStorage.setItem("name", name.value);
                // ...
            }
            // For loading data:
            window.onload = function() {
                var name = localStorage.getItem(name);
                if (name !== null) document.getElemenyById("name").value = name;
                // ...
            }
        </script>
        <title></title>
    </head>
    <body>
        <div id="section">
            <form id="franchiseForm" action="Order_confirmation.php" method="POST">
                <div class="field">
                    <label for="name">Name</label>
                    <input type="text" name="franc_name" id="name" placeholder="Joe Blogs" required tabindex="2">
                    <br>
                </div>
            </form>
        </div>
    </body>
</html>


//要保存数据，请执行以下操作：
window.onbeforeunload=函数（）{
var name=document.getElementById（“名称”）；
// ...
setItem（“name”，name.value）；
// ...
}
//对于加载数据：
window.onload=函数（）{
var name=localStorage.getItem（名称）；
if（name！==null）document.getElemenyById（“name”）.value=name；
// ...
}
名称
如果您能够使用JQuery和JQuery Cookie，则可以将数据保存在Cookie中：

var frn = $(#fran_name).val();
$.cookie("fran_name", frn);
然后在pageload上获取cookie数据，然后将其插入字段：

$(document).ready(function(){
    var cookie = $.cookie("fran_name");
    $('#fran_name').val(cookie);
});
为什么不使用cookies呢？请参见：email.value？这在HTML中的什么位置。我没有通过fiddle或其他任何东西来运行此操作，但乍一看，您有5件事情被设置为一个ID，而我在您的标记中似乎找不到。@对于此类用例，Shocklo local storage是比Cookie更好的解决方案。是将数据放入local storage还是取出并放入表单的问题？您还有一个名为address12的项，我猜错了？非常感谢你，我甚至没看到那些错误！！！我要把它修好，看看它能不能修好works@jerneva恳求 
$(document).ready(function(){
    var cookie = $.cookie("fran_name");
    $('#fran_name').val(cookie);
});