Получение двух полей добавления / удаления списков данных в локальном хранилище на одной странице для работы без конфликтов - PullRequest
Новая
       47

Получение двух полей добавления / удаления списков данных в локальном хранилище на одной странице для работы без конфликтов

0 голосов
/ 22 апреля 2020

Этот вопрос о примере JSfiddle, найденном здесь: Onclick добавить / удалить данные из списка данных в localstorage , а также обсудил здесь, в stackoverflow . В этом конкретном сценарии нет ничего плохого, он мне нравится, и он хорошо работает. Я пытаюсь сделать так, чтобы на одной странице было не одно, а два поля ввода данных, чтобы можно было работать, не конфликтуя друг с другом. Я знаю, что если я добавлю второе поле списка данных, мне придется изменить его идентификатор. У меня возникли проблемы с возможностью настройки соответствующего сценария для размещения двух полей списка данных. Я много раз пытался заставить скрипт работать на двух полях, но он просто заканчивается, когда работает только одно поле данных, а другое просто зависает.

Вот мой пример с двумя вводами данных поля: 

<script>
var datarray = [];

function deldata() {
  // retrieve stored data (JSON stringified) and convert
  var storedData = localStorage.getItem("list_data_key");
  if (storedData) {
    datarray = JSON.parse(storedData);
  }
  var titleValue = document.getElementById('listxt').value;
  // Find and remove item from an array
  var i = datarray.indexOf(titleValue);
  if (i > -1) {
    datarray.splice(i, 1);
  }
  localStorage.setItem("list_data_key", JSON.stringify(datarray));
  datapost();
  show();

  $('#listxt').val('');
}

function insert() {
  var titleValue = document.getElementById('listxt').value;
  datarray[datarray.length] = titleValue;
  // store array to localstorage
  localStorage.setItem("list_data_key", JSON.stringify(datarray));
    show();
  $('#listxt').val('');
}

function show() {
  var content = "<b>All Elements of the Arrays :</b><br>";
  for (var i = 0; i < datarray.length; i++) {
    content += datarray[i] + "<br>";
  }
  document.getElementById('display').innerHTML = content;
  datapost();
}

function datapost() {
  var options = '';
  for (var i = 0; i < datarray.length; i++)
    options += '<option value="' + datarray[i] + '" />';
  document.getElementById('bankit').innerHTML = options;
}

$(window).load(function() {
  // retrieve stored data (JSON stringified) and convert
  var storedData = localStorage.getItem("list_data_key");
  if (storedData) {
    datarray = JSON.parse(storedData);
  }
  show();
  datapost();
});
</script>
<input list="bankit" id="listxt" type="text" />
<datalist id="bankit">
</datalist>
<br>
<br>
<input type="button" value="Save" onclick="insert();">
<input type="button" value="Delete" onclick="deldata();">
<br>
<hr>
<div id="display"></div>

<input list="bankit2" id="listxt2" type="text" />
<datalist id="bankit2">
</datalist>
<br>
<br>
<input type="button" value="Save" onclick="insert();">
<input type="button" value="Delete" onclick="deldata();">
<br>
<hr>
<div id="display"></div>
...