無法從localStorage檢索動態生成的內容

Question

我有一個ID爲「roster1」的HTML表格，允許用戶通過點擊按鈕添加表格行，我試圖通過「保存」按鈕保存表格狀態，運行下面的代碼：

function saveRoster() { 
     localStorage.setItem('rosterPd1',''); 
     var roster = document.getElementById ('roster1'); 
     localStorage.setItem('rosterPd1', roster); 
     } 

如果我輸入一些靜態值到「rosterPd1」，然後我可以使用寫入到localStorage的，沒有問題的信息。但是，當我嘗試使用上面的代碼保存表時，我得到[對象HTMLTableElement]返回...這是正確的，但不是特別有用！

有人能指出我正確的方向，我必須做些什麼才能讓localStorage保存表格本身的內容？

Answer 1

只能保存字符串到存儲，但它似乎是你想要做什麼，innerHTML的就足夠了;

function saveRoster() { 
    var roster = document.getElementById('roster1'); 
    if (!roster) return; // not found 
    localStorage.setItem('rosterPd1', roster.innerHTML); // store innerHTML 
} 
function loadRoster() { 
    var roster = document.getElementById('roster1'); 
    if (!roster) return; // not found 
    roster.innerHTML = localStorage.getItem('rosterPd1'); // get+apply innerHTML 
} 

至於爲什麼你得到[object HTMLTableElement]，這是當你在的JavaScript參照<table>調用toString會發生什麼。

document.createElement('table').toString() // "[object HTMLTableElement]"