使用本地存储保存并加载输入值？ [英] Save and load input values using local storage?

问题描述

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

Demo（让我们假设这是生成的）：

 < input type =textid =meta_titlename =seo_meta_title> 
< input type =textid =meta_descriptionname =seo_meta_description> 
< input type =textid =headername =header> 
 
 <！ - 提交表格 - > 
< input type =submitvalue =Create> 
 
 <！ -   -  buttons  - > 
< button onclick =save（）>保存< / button> 
< button onclick =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 
函数load（）{
 if（typeof（Storage）！=undefined）{
 //将数据添加回表单域
 
 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）; 
 
 
 $ b  

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

解决方案

  $（'＃save'）如果您想依靠jQuery，这可以帮助您：
 .on（'click'，function（）{
 
 $（'input [type =text]'）。each（function（）{
 var id = $（this） .attr（'id'）; 
 var value = $（this）.val（）; 
 localStorage.setItem（id，value）; 
 $ b $}}; 
}）; $（'＃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（）将点击 -handler附加到两个按钮上。

演示 $ b

参考：

.each（）

I'm trying to store via local storage all form field values (under the input id) like so localStorage.setItem("input id", fieldvalue); when a user clicks then "save" button. the reason being is so at a later date the user has the option of reloading the form field values instead of retyping everything the problem is the input id and name fields are not known because they are generated depending on what the user selects in the previous page (what template they choose).

Demo (let's say this was generated):

<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>

because i don't know the input ids, i can't just write:

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);
   }
}

And same goes for the load function

// 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");

    }
}

I'm very new to JavaScript as I'm sure you can tell any help, code or links would be much appreciated and a working js fiddle would be beyond amazing (as long as it doesn't rely on pre knowing the input id etc..) I have spent a few hours trying to do this and wasted even more time trying generate the JS needed with PHP in till I was told this was a terrible way to do it.

解决方案

If you want to rely on jQuery this can help you:

$('#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);

    }); 
});

I would recommend to avoid inline-js, so I updated to code to use .on() for attaching the click-handler to the two buttons.

Demo

Reference:

.each()

这篇关于使用本地存储保存并加载输入值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！