Ребята, подскажите как хранить записи в таблице в 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>
localStorage['name'] = 'value';
- это работает быстрее. И получается, что у вас одно и тоже значение перезаписывается, после обновления скрипта.localStorage.setItem
иlocalStorage.getItem