仅使用 jquery 在下一页上附加本地存储表单数据答案

【问题标题】：Append localstorage form data on next page using jquery only仅使用 jquery 在下一页上附加本地存储表单数据
【发布时间】：2018-09-24 18:53:30
【问题描述】：

我有两个页面，分别是“form.html”和“data.html”。在“form.html”中，我有以下 html 和 jquery 代码：

html：

<form id="myForm">
    <label>Enter Name: <input type="text" id="txtName" /></label>
    <button id="_save">Save</button>
</form>

jquery：

$(document).ready(function() {
    $("#_save").on('click', function() {
        localStorage.name = $('#txtName').val();
        console.log("data saved");
    });
});

在 "data.html" 我有以下代码：

html：

<div id="dataContainer"></div>

"jquery:"

$(document).ready(function() {
    loadData();
});

function loadData() {
    $('#dataContainer').append('<div><h5>' + localStorage.name + '</h5></div>');
    localStorage.removeItem(name);
}

当前情况： 在 form.html 我正在尝试使用 click fn 和 localstorage 存储表单数据。在 data.html 中，我试图在文档就绪功能上获取存储的数据。删除之前的数据并加载新输入的数据。

问题： 我正在尝试在 data.html 中附加所有名称，这些名称存储在 form.html 页面中。我需要之前输入的所有名称。（不应删除先前输入的数据。）请帮助我在我失踪的地方或任何建议。

【问题讨论】：

标签： jquery html local-storage

【解决方案1】：

您可以将以前保存的数据附加到新数据中，然后在下一页读取。

$(document).ready(function() {
    $("#_save").on('click', function() {
        //append previously saved data with comma separator
        localStorage.name = localStorage.name + "," + $('#txtName').val();
        console.log("data saved");
    });
});

并从 loadData 函数中删除以下行 localStorage.removeItem(name);

【讨论】：

非常感谢，效果很好。会在几分钟内接受这个作为答案。
@BhushanKawadkar ：我也修改了我的场景.. 有用的解决方案
@Kulfi，很高兴为您提供帮助:)

【解决方案2】：

将它存储在一个数组中。然后检索它并显示。

// First click function
$("#_save").on('click', function() {
  names = localStorage.names;
  if(names){
    //names found

    // convert names into an array
    names = JSON.parse(names);
  } else {
    //names not found so start with a new array
    names = [];
  }

  //get new name
  new_name = $('#txtName').val();

  //push new name into the names array
  names.push(new_name);

  //save names array to localstorage
  localStorage.names = JSON.stringify(names);

  console.log("data saved");
});


// Load data function
function loadData() {
  // Get localstorage names
  names = localStorage.names;
  if(names){
    // convert names into an array
    names = JSON.parse(names);
  } else {
    //if no names found
    names = [];
  }

  if(names.length){
    // loop through the array to print all names
    for(var i = 0; i < names.length; i++){
      // get the individual name
      name = names[i];

      //pring name
      $('#dataContainer').append('<div><h5>' + name + '</h5></div>');
    }
  } else {
    // no names found in the array
    $('#dataContainer').append('<div><h5>No names found!</h5></div>');
  }
}

【讨论】：