如何將使用jQuery編輯的HTML表保存到本地存儲？

我有一個用戶可以添加單個行的HTML表。我希望用戶能夠將其保存爲脫機狀態，以便刷新後保留表中的數據。我被告知這是最簡單的方法，但如果任何人有任何其他建議，我已經開放了耳朵。如何將使用jQuery編輯的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'); 
}); 
});

來源

2017-09-14 JustinThyme

解決此問題的最佳方法是使用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>

來源

2017-09-14 22:23:58

你有正確的想法。一定要使用JSON.stringify（）和JSON.parse（）如下：

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

來源

2017-09-14 22:27:17 Rapta

燦我不只是使用var tableData = $（＃myTable）.html;第一行呢？ – JustinThyme

這將存儲的HTML，而不是數據。 – Rapta

最簡單的方式做到這一點，我認爲：

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/

來源

2017-09-14 23:33:33 Frenker

如何將使用jQuery編輯的HTML表保存到本地存儲？

回答

相關問題