Question

我有一个用户可以添加单个行的html表。我希望用户能够将其保存为脱机状态，以便刷新后表中的数据保持不变。我被告知这是最简单的方法，但如果有人有任何其他建议，我会张开耳朵。

$(document).ready(function(){
var count = 1;
var table = "You fucked up yo";
$('#add').click(function addRow(){
  var model = $('#Model').val();
  var size = $('#Size').val();
  var resolution = $('#Resolution').val();
  var backlight = $('#Backlight').val();
  var pins = $('#Pins').val();
  var touch = $('#Touch').val();
  $('#screens').append("<tr id='row"+count+"'><td>"+count+"</td><td id 
  ='model"+count+"'>"+model+"</td><td id ='sizes"+count+"'>"+size+"</td><td 
  id 
  ='resolution"+count+"'>"+resolution+"</td><td id 
  ='backlight"+count+"'>"+backlight+"</td><td id ='pins"+count+"'>"+pins+"
  </td><td id ='touch"+count+"'>"+touch+"</td>");
  var key = "table"+count;
  count++;
});
$('#remove').click(function removeRow(){
  var row = $('#row').val();
  $('table#screens tr#row'+row).remove();
});
$('#save').click(function save(){
  var table = $('#screens').html;
  localStorage.setItem("Table", table);
  alert('yo');
});
$('#open').click(function open(){
  $('#screens').html =  localStorage.getItem("Table");
  alert('yo');
});
});

Answer 1

解决此问题的最佳方法是使用JSON存储表值，并将该结构存储在localStorage或数据库中。但是为了回答你的问题，我认为这是你需要从localStorage存储和检索表结构。希望这就是你所需要的。

<!DOCTYPE html>
<html>
<body>

<div id="tablediv"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("Mytable", "<table><tr><td>col1</td></tr></table>");
    // Retrieve
    document.getElementById("tableDiv").innerHTML = localStorage.getItem("Mytable");
} else {
    document.getElementById("tableDiv").innerHTML = "Your browser does not support Web Storage";
}
</script>

</body>
</html>

Answer 2

你有正确的想法。请务必使用JSON.stringify（）和JSON.parse（），如下所示：

var tableData = [{name: "John", email: "jhenry@example.com"}];
// Persist
localStorage.setItem("nameForYourData", JSON.stringify(tableData));
// Retrieve
tableData = JSON.parse(localStorage.getItem("nameForYourData"));

Answer 3

我认为这是最简单的方法：

var table = $('table').wrap('<table/>').parent().html();
table = JSON.stringify(table);
window.localStorage.setItem('savedTable', table);

// then later
table = JSON.parse(window.localStorage.getItem('savedTable'))

这是一个小提琴：https://jsfiddle.net/8dhnqy0b/

如何将使用jQuery编辑的HTML表保存到本地存储？

3 个答案: