设置并获取在 javascript 中创建的 HTML 到会话本地存储答案

【问题标题】：Set and get a HTML created in javascript to session local storage设置并获取在 javascript 中创建的 HTML 到会话本地存储
【发布时间】：2014-11-08 12:54:45
【问题描述】：

我需要以下代码在页面重新加载中持续存在，好的。

<br/>   
    <div style="font-size: 8pt;float: left;width:100%;margin-left: 15px;margin-top:5px;">
        some text here
    </div>
    <div style="width: 100%; height: 40px;">
        <div class="flechaDestinatario"/>
        <div class="textoDestinatario">
            more text here
        </div>
    </div>

我需要在 javascript 中动态添加更多元素，但您可以将其视为示例。我把上面的代码元素放在一个父div中，div的父id是'chatUsuario'，javascript var name是'mensagem'，无论如何，

var mensagem = document.getElementById('chatUsuario');

        if (mensagem != null) {
            $(mensagem)
                    .append(
                            '<br/>  <div style="font-size: 8pt;float: left;width:100%;margin-       left: 15px;margin-top:5px;">'
                                    + args.dataHora
                                    + '</div>'
                                    + '<div style="width: 100%; height: 40px;">'
                                    + '<div class="flechaDestinatario"/>'
                                    + '<div class="textoDestinatario">'

                                    + args.mensagemRetorno
                                    + '</div>'
                                    + '</div>');
        }

我尝试了很多事情，但都没有成功，例如：

    localStorage.setItem('mensagensBackup',JSON.stringify(mensagem));


  $(window).load(function() {
        var mensagensBackup = localStorage.getItem('mensagensBackup');
    if(mensagensBackup!=null)
    {
        var retrievedObject =  JSON.parse(mensagensBackup);

        document.getElementById('chatUsuarioContainer').innerHTML=retrievedObject;
    }
});

我也试了jStorage.js，又没有成功。

两种情况我都有同样的错误：“converting circular structure to json”

我真的尝试了，但我无法解决这个错误

还有其他解决方案吗？有解决方法吗？我能做什么？

非常感谢;)

PS：我使用 JSF 2.2 和 Prime 5

【问题讨论】：

mensagem的值是多少？
mensagem 是一个 div，包含代码
这里有一些文字

这里有更多文字
是的，但是变量的值是多少？显示您用于将 div 分配到其中的代码。
已编辑并包含代码

标签： javascript jquery json html jsf

【解决方案1】：

您不能直接对 DOM 元素对象进行字符串化，因为它包含对自身的循环引用（如错误消息所述）。另一方面，您甚至不想这样做，因为无论如何您只对它的 HTML 内容感兴趣。所以把代码改成

localStorage.setItem( 'mensagensBackup', mensagem.innerHTML );

然后删除现在不需要的JSON.parse() 行。

（作为旁注，大多数时候保存某种抽象的数据而不是整个 HTML 更合理，但这是另一个讨论。）

【讨论】：

谢谢，正是我需要的
function recuperaConversa() { var mensagensBackup = localStorage.getItem('mensagensBackup'); if(mensagensBackup!=null) { var mensagem = document.getElementById('chatUsuario'); if (mensagem != null) { $(mensagem).append(mensagensBackup); } } }

【解决方案2】：

您可以将html子树存储在localStorage中并在重新加载后恢复

 localStorage.setItem('mensagensBackup',mensagem.innerHTML));


$(function() {
  var mensagensBackup = localStorage.getItem('mensagensBackup');
  if(mensagensBackup)
      document.getElementById('chatUsuarioContainer').innerHTML = mensagensBackup;
  }
});

【讨论】：