如何使用 Base64 编码 HTMLTableSectionElement 并附加解码值

Question

我正在将一些子节点保存为 Base64。这是为了更容易地传递一组元素（节点），最终将 base64 字符串保存到数据库中，并希望将其读回原始 HTML 元素（节点）

我正在使用 atob() 和 btoa() https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

我不知道如何重新使用这个 base64。我知道如何将它转换回 HTML.

在我的应用程序中，当用户保存（单击按钮）时，它使用 btoa 保存了一个 HTML 元素（和子元素），我得到了 'funny' 外观字符串。

现在，我需要将其从字符串中重新加载到 HTML 理解的内容中以在 GUI 中显示它。

我使用 atob(myString) 我得到一个 HTMLDivElement

我不知道怎么用这个。这意味着以下失败

我的努力是（这在 IE 中可能行不通，这很好）

  const wrapperEle = document.getElementById("wrapper");
  const destinationEle = document.getElementById("destination");
  const btn = document.getElementById("button");

  btn.addEventListener("click", performLogic);

  function performLogic() {

      destinationEle.innerHTML = null;

      const myString = btoa(wrapperEle); //encode
      const data = atob(myString);       //decode

        try {
            const node = document.createElement(data);
            destination.appendChild(node);
        } catch (e){
            alert("Failed on first effort");
        }

        try {
            destination.append(data); //appends [object HTMLDivElement]
            alert("second attempt complete");
        } catch  (e){
            alert("Failed on second effort");
        }

        try {
            destination = data; //appends [object HTMLDivELement]
            alert("third attempt complete but nothing shows");
        } catch  (e){
            alert("Failed on third effort");
        }

        try {
            destination.append(myString); //appends [object HTMLDivELement]
            alert("fourth attempt complete but nothing shows");
        } catch  (e){
            alert("Failed on fourth effort");
        }
    }

<div id="wrapper">
<table>
<tr>
  <td>data 01</td>
  <td>data 02</td>
</tr>
</table>
</div>

<input type="button" id="button" value="Click" />

<div id="destination">
I want and expect this line of text to be replaced with the table content above after you click on the button
</div>

如何重新使用编码和解码后的值？理想情况下，没有 JQuery 或任何框架，只有 Javascript

我也添加了 JS，但它在 IE 中不起作用（没问题）。

https://jsfiddle.net/uLb8okrs/2/

Answer 1

您遇到的问题与这样一个事实有关，即与 appendChild 在许多模糊这一事实的框架中不同，appendChild 不接受字符串作为有效参数，这就是 atob returns 你给定的字符串为； appendChild 仅接受 Node 对象作为有效参数（有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append）

因此，按照您的意愿执行此操作，您有 2 个选择：

1) 必须先将你解密后的字符串转换成节点对象，然后调用appendChild

const data = atob(myString);    
var node = document.createElement(data);
myHtmlElement.appendChild(node);

2) 只需使用 append 而不是 appendChild

const data = atob(myString);    
myHtmlElement.append(node);

注意：append 在 IE 中无效

Answer 2

您正在尝试 select、编码、解码然后附加 Element which is a bit more convoluted than necessary for what you are trying to achieve. Instead, just get the HTML of the element you want "copy" via the outerHTML 属性，然后编码、解码并替换您目的地的 HTML div.

例如：

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');
const encodeDecodeAppend = () => {
  const encoded = btoa(wrapper.outerHTML); //encoded HTML
  const decoded = atob(encoded); // decoded HTML
  destination.innerHTML = decoded;
};

button.addEventListener('click', encodeDecodeAppend);

<div id="wrapper">
  <table>
    <tr>
      <td>data 01</td>
      <td>data 02</td>
    </tr>
  </table>
</div>
<input type="button" id="button" value="Click">
<div id="destination">
  I want and expect this line of text to be replaced with the table content above after you click on the button
</div>

Answer 3

您正在尝试对 DOM 元素进行编码，这就是您得到 HTMLDivElement.

的原因

你应该做的是获取源元素的 innerHTML 然后 encode 它，然后将它保存到数据库或任何你想要的地方，然后再次 decode 它并且再次设置目标元素的innerHTML。

就这么简单。在代码片段中添加了注释，以尽可能清楚步骤。

另外注意编码后 myString 的控制台输出，看看它与编码 element（不是字符串）后发现的有何不同

注意： 如果您也想要 #wrapper 元素，请使用 outerHTML 作为 benvc 的回答。

const wrapperEle = document.getElementById("wrapper");
const destinationEle = document.getElementById("destination");
const btn = document.getElementById("button");

btn.addEventListener("click", performLogic);

function performLogic() {
  destinationEle.innerHTML = null;
  let myString = btoa(wrapperEle.innerHTML); //encode /// and take the innerHTML of it to parse, not the DOM itself
  console.log(myString); // check now what it looks like, or save it in database or wherever you want.
  let data = atob(myString); //decode /// again, after decoding you just get the string type data, not a DOM type
  destinationEle.innerHTML = data; // so, now you can set the string as an innerHTML to the target element
}

<div id="wrapper">
  <table>
    <tr>
      <td>data 01</td>
      <td>data 02</td>
    </tr>
  </table>
</div>

<input type="button" id="button" value="Click" />

<div id="destination">
  I want and expect this line of text to be replaced with the table content above after you click on the button
</div>

如何使用 Base64 编码 HTMLTableSectionElement 并附加解码值

How do I encode HTMLTableSectionElement with Base64 and append decoded value

javascript

base64

encoding

decoding