将部分 html 保存到本地存储稍后加载答案

【问题标题】：Save a part of html to local storage later load将部分 html 保存到本地存储稍后加载
【发布时间】：2016-09-04 12:24:46
【问题描述】：

我需要将 html div (id=tabela) 的内容保存到 localstorage，以便可以通过 localstorage 在另一个会话中加载表的内容。如何将 div 的内容放入变量中？

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。

【问题讨论】：

标签： javascript jquery html css html-table

【解决方案1】：

你可以使用document.getElementById("myID").innerHTML，像这样：

var = tabelaContent; 

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

【讨论】：

也许我已经保存了它。但是当我使用“加载”时，它不会恢复表的先前状态。我做错了什么？
我正在使用“localStorage.getItem(tabelaContent)”
document.getElementById("tabela").innerHTML = localStorage.getItem("tabelaContent");结果是“tabelaContent”代替了表格。
现在它可以工作了，在从 $("#tabela").html(tabelaContent); 中删除 "" 之后但控制台仍然输出“tabelaContent is undefined”
好的，通过添加 var tabelaContent; 修复它在 document.getElementById 之前。

【解决方案2】：

这就是你要找的东西。

<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

【讨论】：