如何将“div”列表保存到 sessionStorage 并在用户重新加载页面时显示它们？答案

【问题标题】：How to save a list of "divs" to sessionStorage and display them when the user reloads the page?如何将“div”列表保存到 sessionStorage 并在用户重新加载页面时显示它们？
【发布时间】：2021-11-22 18:45:18
【问题描述】：

我有一个 HTML 页面如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css" type="text/css">
        <title>Test</title>
    </head>
    <body>
        <div>
            <p>Hello World!</p>
        </div>
    </body>
</html>

然后我有一个 JS 文件，它监听 enter 键的点击，如果用户点击 enter，如果添加另一个 div。

//the event handler function
function captureEnterPress(event) {
    if (event.key === "Enter" || event.keyCode === 13) {
        event.preventDefault();
        createNewDiv();
    }
}

//creates the div
function createNewDiv() {
    var body = document.body;
    var div = document.createElement("div");
    var p = document.createElement("p");
    var labelText = document.createTextNode("Hello World!");
    p.appendChild(labelText);
    div.appendChile(p);
    body.appendChild(div);
}

onload = () => {
    document.documentElement.addEventListener("keyup", captureEnterPress);
}

我正在尝试保存 div 的数量，因此当用户重新加载页面时，它会显示与之前相同数量的 div。

我尝试了什么

我尝试将所有 div 的数组保存到 sessionStorage，如下所示：

var myStorage = window.sessionStorage;
var elementsArray = [];

//the event handler function
function captureEnterPress(event) {
    if (event.key === "Enter" || event.keyCode === 13) {
        event.preventDefault();
        createNewDiv();
    }
}

//creates the div
function createNewDiv() {
    var body = document.body;
    var div = document.createElement("div");
    var p = document.createElement("p");
    var labelText = document.createTextNode("Hello World!");
    p.appendChild(labelText);
    div.appendChile(p);
    body.appendChild(div);
    elementsArray[elementsArray.length] = div;
    myStorage.setItem("storedPage", JSON.stringify(elementsArray));
}

onload = () => {
    var storedPage = JSON.parse(myStorage.getItem("storedPage"));
    if(storedPage){
        event.preventDefault();
        for(var i = 0; i < storedPage.length; i++){
            document.body.appendChild(storedPage[i]);
            console.log(storedPage)
        }
         
    }
    document.documentElement.addEventListener("keyup", captureEnterPress);
}

我只是将它记录到控制台以查看值是什么，但它们是空的。所以我尝试存储 div.innerHTML，但是如果我尝试将其附加到文档中，我会得到错误，它是字符串而不是节点。

我没有想法，而且我对前端开发中的整个状态存储概念还很陌生，如果有人能告诉我什么是正确的做法，我将不胜感激。谢谢！

【问题讨论】：

我想说不要直接将div 节点保存到存储中。存储实际的 html。
@navnath 请详细说明...
stackoverflow.com/questions/37123035/…
@zecuria 请阅读完整的问题，了解为什么该解决方案不适用于我的情况。
@BeeFriedman comment in the answer 阐明了如何使用它，即不直接调用 append 而是修改 .innerHTML

标签： javascript html session-state

【解决方案1】：

未测试，但足以说明

function createNewDiv() {
    // create html content
    const div = `<div><p>Hello World!</p></div>`;
    // concat with body
    document.body.innerHTML += div;
    // save in array
    elementsArray[elementsArray.length] = div;
    // save in storage
    myStorage.setItem("storedPage", JSON.stringify(elementsArray));
}

onload = () => {
    var storedPage = JSON.parse(myStorage.getItem("storedPage"));
    if(storedPage){
        event.preventDefault();
        // get stored content array and join by empty '' and add into body
         document.body.innerHTML = storedPage.join('');
    }
    document.documentElement.addEventListener("keyup", captureEnterPress);
}

【讨论】：

【解决方案2】：

我在这段代码中看到的问题是JSON.stringify 无法转换 DOM 元素。 Article on how to do this.

但是，更好的方法是保存一些容器的innerHTML，然后恢复它。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <title>Test</title>
  </head>

  <body>
    <div id="div-container">
      <div>
        <p>Hello World!</p>
      </div>
    </div>
  </body>

</html>

JS：

var myStorage = window.sessionStorage;
var elementsArray = [];

//the event handler function
function captureEnterPress(event) {
  if (event.key === "Enter" || event.keyCode === 13) {
    event.preventDefault();
    createNewDiv();
  }
}

//creates the div
function createNewDiv() {

  var divContainer = document.getElementById("div-container");
  const div = "<div><p>Hello World!</p></div>";
  divContainer.innerHTML += div;
  
  console.log(divContainer.innerHTML);
  myStorage.setItem("storedPage", divContainer.innerHTML);
}

onload = () => {
    var storedPage = myStorage.getItem("storedPage");
    if(storedPage){
        event.preventDefault();
        var divContainer = document.getElementById("div-container");
        divContainer.innerHTML = storedPage;
    }
    
    document.documentElement.addEventListener("keyup", captureEnterPress);
}

JSFiddle：https://jsfiddle.net/wLgh1ef8/1/

编辑：您始终可以使用 DevTools 查看 sessionStorage 的内容

F12 -> 应用程序选项卡 -> 会话存储

【讨论】：