將html的一部分保存到本地存儲，稍後加載

我需要將html div（id = tabela）的內容保存到localstorage，以便可以通過localstorage將表的內容加載到另一個會話中。如何將div內容轉換爲變量？將html的一部分保存到本地存儲，稍後加載

var = tabelaContent; //<-- I need contents of <div id=tabela> in this 
localStorage.setItem("tabelaContent",tabelaContent); 

// then, upon pressing the "load" button 

localStorage.getItem(tabelaContent);

僅供參考，如果有做表的內容持續性的另一種方式，讓我知道

TIA。

來源

2016-05-09 Stan Kenway

您可以使用document.getElementById("myID").innerHTML，像這樣：

var = tabelaContent; 

tabelaContent = document.getElementById("tabela").innerHTML 
localStorage.setItem("tabelaContent",tabelaContent);

來源

2016-05-09 18:39:38 scaisEdge

也許我已經救了它。但是，當我使用「加載」它不會恢復表的以前的狀態。我做錯了什麼？ –

我正在使用「localStorage.getItem（tabelaContent）」 –

document.getElementById（「tabela」）。innerHTML = localStorage.getItem（「tabelaContent」）;導致「tabelaContent」代替表格。 –

這裏是你在找什麼。

<div id="tabela"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 

<button id="del" onclick="destroy()">Destroy div Content</button> 
<button id="res" onclick="retrieve()">Restore content from local storage</button> 

<script> 

    var tabelaContent = document.getElementById("tabela").innerHTML; 

    // Store Content 
    localStorage.setItem("tabelaContent", tabelaContent); 

function destroy(){ 
    document.getElementById("tabela").innerHTML = ""; 
} 

    // Retrieve Content  
function retrieve(){ 
    document.getElementById("tabela").innerHTML = localStorage.getItem("tabelaContent"); 
} 


</script>

入住這working demo

來源

2016-05-09 19:07:06

將html的一部分保存到本地存儲，稍後加載

回答

相關問題