Question

当用户点击“保存”按钮时，我试图通过本地存储存储所有表单字段值（在输入ID下），如localStorage.setItem("input id", fieldvalue);。原因是在以后的日期，用户可以选择重新加载表单字段值而不是重新输入所有问题，输入ID和名称字段是未知的，因为它们是根据用户在上一页中选择的内容生成的（他们选择什么模板）。

演示（假设这是生成的）：

<input type="text" id="meta_title" name="seo_meta_title"> 
<input type="text" id="meta_description" name="seo_meta_description"> 
<input type="text" id="header" name="header"> 

<!-- Submit form-->
  <input type="submit" value="Create">

<!-- buttons-->
  <button onclick="save()">save</button>
  <button onclick="load()">load</button>

因为我不知道输入ID，所以我不能写：

function save() {
  if (typeof(Storage) != "undefined") {

    //some_code_to_insert_value = x, y, z 

    localStorage.setItem("meta_title", x);
    localStorage.setItem("meta_description", y);
    localStorage.setItem("header", z);
   }
}

负载功能也是如此

// LOAD
function load() {
if (typeof(Storage) != "undefined") {
   // Adds data back into form fields 

   document.getElementById("meta_title").value = localStorage.getItem("meta_title");
   document.getElementById("meta_description").value = localStorage.getItem("meta_description");
   document.getElementById("header").value = localStorage.getItem("header");

    }
}

我是JavaScript的新手，因为我相信你可以告诉任何帮助，代码或链接会非常感激，并且工作js小提琴会超出惊人（只要它不依赖于预先知道输入ID等。）我花了几个小时尝试这样做，浪费了更多的时间来尝试生成PHP所需的JS，直到我被告知这是一种可怕的方式。

Answer 1

如果您想依赖jQuery，这可以帮助您：

$('#save').on('click', function(){

    $('input[type="text"]').each(function(){    
        var id = $(this).attr('id');
        var value = $(this).val();
       localStorage.setItem(id, value);

    });   
});

$('#load').on('click', function(){
    $('input[type="text"]').each(function(){    
        var id = $(this).attr('id');
        var value = localStorage.getItem(id);

        $(this).val(value);

    }); 
});

我建议避免使用inline-js，因此我更新了代码以使用.on()将click - 处理程序附加到两个按钮。

<强> Demo

<强>参考：

.each()

Answer 2

   Replace Html Code And Script File 
   <form method='post' id='myform'>
    <input type="text" id="meta_title" name="seo_meta_title"> 
    <input type="text" id="meta_description" name="seo_meta_description"> 
    <input type="text" id="header" name="header"> 

    <!-- Submit form-->
      <input type="submit" id="save" value="Create">

    <!-- buttons-->
      <button onclick="save()">save</button>
      <button onclick="load()">load</button>
    </form>
    <script>
    $('#save').on('click', function(){
       var post_vars = $('#myform').serializeArray();
       localStorage.setItem(id, post_vars);
    });
    </script>

使用本地存储保存并加载输入值？

2 个答案: