0

Ребята, подскажите как хранить записи в таблице в localStarage, что бы после загрузки все осталось на своих местах. Я попыталась, но что-то пошло не так. может таблицы не хранятся в localStarage, а нужно брать артиллерию по тяжелей - JSON?подскажите

//localStorage для таблицы 
document.getElementById("table").innerHTML = localStorage.getItem("saveTable");
//localStorage для input
document.getElementById("fild").value = localStorage.getItem("name");
var fild = document.getElementById('fild');
localStorage.setItem('name', 'fild');

var counter = 1;
var table = document.querySelector('.table tbody');
var valueTab = buttonClick.addEventListener('click', function(e) {
  var t = document.getElementById('t');

  var row = t.insertRow();
 //localStorage для таблицы 
localStorage.setItem('saveTable', 'valueTab');
  var target = e.target;
  if (target.tagName = 'button') {
    row.insertCell().innerHTML = counter;
    counter++;
  }
  row.insertCell().innerHTML = fild.value;

  row.insertCell().innerHTML = '<input type="button" value="DELETE" class="del"  />';

  var del = document.getElementsByClassName('del');
  for (var i = 0; i < del.length; i++) {
    del[i].addEventListener('click', function(but) {
      var trq = this.parentNode.parentNode;
      trq.remove();
    });
  }

  fild.value = "";

})
#fild {
  margin-bottom: 20px;
}

table {
  height: 100px;
  width: 100%;
}

#firstLine {
  text-align: center;
}

tr td {
  border: 1px solid black;
}

#buttonClick {
  margin-bottom: 20px;
}
<p>Name of employer</p>
<input type="text" id="fild"><br>
<button id="buttonClick">Result</button>
<div id="table">
  <table id="t">
    <tr id="firstLine">
      <td>№</td>
      <td>Name of employer</td>
      <td>Delete</td>
    </tr>
  </table>
</div>

9
  • Лучше юзать localStorage['name'] = 'value'; - это работает быстрее. И получается, что у вас одно и тоже значение перезаписывается, после обновления скрипта.
    – And
    23 апр 2018 в 10:43
  • @And, это работает быстрее чем что?
    – Grundy
    23 апр 2018 в 11:51
  • @Grundy, чем localStorage.setItem и localStorage.getItem
    – And
    23 апр 2018 в 11:54
  • @And, ты не прав - это одна и та же функция
    – Grundy
    23 апр 2018 в 11:55
  • @Grundy, несогласен. Во первых не требуется дергать функцию, а во вторых в функции еще до кучи есть проверки и условия, нежели дернуть массив.
    – And
    23 апр 2018 в 11:55

1 ответ 1

1

Во первых в localStorage хранятся только строки.

Вот таким localStorage['name'] = 'fild'; образом вы записали строку fild в ячейку name, не нужно использовать кавычки, если хотите сохранить значение переменной fild.

Далее, в var fild = document.getElementById('fild'); вы пытаетесь сохранить HTML элемент? Это тоже не получится, но я так понимаю вам нужно только значение этого поля, так что можете сохранить значение так localStorage['name'] = fild.value;

Если вы хотите сохранить JS объект с полями например такой

var obj = {name: 'str', num:0}; 

то для его сохранения вам понадобится перевести его в JSON строку

localStorage['savedObj'] = JSON.stringify(obj);

а при его чтении распарсить его

var obj = JSON.parse(localStorage['savedObj']);
5
  • 1
    я бы посоветовал пользоваться setItem и getItem, а не использовать localStorage как объект. developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/… 23 апр 2018 в 10:58
  • @Komdosh, спасибо за очень подробное описание! но localStorage['name'] = fild.value; не дало никаких результатов. потом я написала такой код var fild = document.getElementById('fild'); if( fild.value !== '') { fild.value = localStorage.getItem("name") } localStorage.setItem("name", fild) но он тоже не заработал. в значение value [object HTMLInputElement]. что не так. подскажите. я немножко не догоняю))
    – maRIA M.
    23 апр 2018 в 14:53
  • ну какое-то странное условие, если оно не пустое, загрузить знечение. [object HTMLInputElement] означает, что как раз таки был сохранён DOM объект, а не его значение
    – Komdosh
    23 апр 2018 в 16:46
  • @Komdosh, окей, как сохранить его значение?
    – maRIA M.
    23 апр 2018 в 16:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.