Добавить данные формы localalstorage на следующей странице, используя только jquery - PullRequest
0 голосов
/ 24 сентября 2018

У меня есть две страницы: "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 , я пытаюсь получить сохраненные данные в функции готовности документа.где, поскольку предыдущие данные удаляются, а новые введенные данные загружаются.

Проблема: Я пытаюсь добавить все имена в data.html которые хранятся на form.html странице.Мне нужны все имена, которые были введены ранее.(ранее введенные данные не должны быть удалены.) Пожалуйста, помогите мне, где я пропускаю или какие-либо предложения, пожалуйста.

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Храните его в массиве.Затем найдите его и отобразите.

// 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>');
  }
}
0 голосов
/ 24 сентября 2018

Вы можете добавить ранее сохраненные данные к новым и прочитать их на следующей странице.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...