代码之家 › 专栏 › 技术社区 › UiUx

仅使用jquery在下一页追加localstorage表单数据

local-storage html jquery

UiUx · 技术社区 · 6 年前

我有两个页面,分别是“form.html”和“data.html”。 “我有以下html和jquery代码:

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

“数据.html” 我有以下代码:

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

“jquery:”

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

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

在里面 表单.html 数据.html

问题: 存储在 表单.html 请帮助我哪里我失踪或任何建议请。

2 回复 | 直到 6 年前

Bhushan Kawadkar 6 年前

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

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

localStorage.removeItem(name);

Kumar 6 年前

将其存储在数组中。然后检索并显示。

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前