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

Posted 2023-03-05

【中文标题】使用本地存储保存和加载输入值？

【英文标题】：Save and load input values using local storage?

【发布时间】：2015-02-01 02:49:32

【问题描述】：

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

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

<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 fiddle 将令人惊叹（只要它不依赖于预先知道输入 id 等。）我花了几个小时试图做到这一点，并浪费了更多的时间来尝试生成 php 所需的 JS，直到我被告知这是一种糟糕的方法。

【问题讨论】：

您的 html 和 JavaScript 中都有非法字符。

此处输入错误(""meta_description") 项目名称前的两个引号。

抱歉会更正，这只是演示代码不起作用。仅在此处举例

【参考方案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-handler 附加到两个按钮。

Demo

参考：

.each()

【讨论】：

哇，非常感谢你，这太完美了！ jQuery 100% 没问题，这正是我想要的！感谢你的宝贵时间！对我来说意义重大！一旦我获得了它需要的 15 个代表，我会回来并对此表示支持！

这为我的应用程序中的 200 多个动态表单字段节省了数小时的变量编程时间。谢谢@empiric !!!!

如何更改此代码以仅在其 id 已存在于 localStorage 中时才加载它？

我愿意value && $(this).val(value);

【参考方案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>