Question

我有两个页面，分别是“ 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 中，我正在尝试使用单击fn和localstorage存储表单数据。与 data.html 中的位置一样，我试图在文档就绪功能中获取存储的数据。删除先前的数据并加载新输入的数据。

问题： 我试图将所有存储在 form.html 页面中的名称添加到 data.html 中。我需要以前输入的所有名称。（先前输入的数据不应删除。）请在缺少我的地方帮我，或者有任何建议。

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

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

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

2 个答案: