如何将div的innerHTML保存在本地存储中？

Question

我想保存和恢复 div 中的数据 - 即其他 div 的容器，

为了做到这一点，我像这样使用本地存储和 JSON：

window.onload = restoreJason;

function makeJson(){
     var canvas = document.getElementById("canvas");
            var shapes = canvas.querySelectorAll("div[class='drag']");
            var divs = new Object();
            for(var i=0; i<shapes.length; ++i){
                divs[shapes[i].getAttribute('innerHTML')] = shapes[i].innerHTML;
            }
            localStorage.setItem("divs", JSON.stringify(divs));
        }

function restoreJason(){
        var divs = JSON.parse(localStorage.getItem("divs"));
            var canvas = document.getElementById("canvas");
            var shapes = canvas.querySelectorAll("div[class='drag']");
            for(var i = 0; i<shapes.length; i++){
                shapes[i].value = divs[shapes[i].getAttribute("innerHTML")];
            }
            console.log(divs);
    }

但是，我不知道如何访问元素的 innerHTML 并保存或恢复它。

你觉得我该怎么办？

（更详细一点 - 我需要在用户单击“保存”时保存 div 的内容，并在用户单击“加载”时加载它。这是它的一个片段......）

注意：“canvas”只是主 div 的 id，而不是真正的“canvas”。

function randomizeColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}


function randomizeRectangle() {
    var width = Math.random() * 700 + 50;
    var height = Math.random() * 250 + 50;
    if (height <= 20) {
        height = 20;
    }
    var posX = Math.round(Math.random() * window.innerWidth);
    var posY = Math.round(Math.random() * window.innerHeight);

    var randomRecObj = {
        "width": width + "px",
        "height": height + "px",
        "posX": posX,
        "posY": posY
    };
    return randomRecObj;
}
function makeShape() {
    var rect = randomizeRectangle();
    var rectDOM = document.createElement("div");
    rectDOM.className = "rectangle";
    rectDOM.style.border = "1px solid black";
    rectDOM.style.width = rect.width;
    rectDOM.style.height = rect.height;
    rectDOM.style.background = randomizeColor();
    rectDOM.style.top = rect.posY + "px";
    rectDOM.style.left = rect.posX + "px";
    //rectDOM.addEventListener("click", selectShape);
    // rectDOM.style.transform =rect.rotation;
    return rectDOM;

}

function randRect() {
    var rectDOM = makeShape();
    var canvas = document.getElementById("canvas");
    canvas.appendChild(rectDOM);
}

function randOval() {
    var ovalDOM = makeShape();
    ovalDOM.style.borderRadius = "50%";
    var canvas = document.getElementById("canvas");
    canvas.appendChild(ovalDOM);
}

function changeColor(){
    
}


function cancelSelection() {
    var selected = document.getElementsByClassName("selected");
    while (selected) {
        selected[0].classList.remove(selected[0]);
    }
}

function removeShape(event) {
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    while (len > 0) {
        selectedShapes[0].parentNode.removeChild(selectedShapes[0]);
        --len;
    }
}

function removeCorners(rectDom) {
    var corners = document.getElementsByClassName("corners");
    var len = corners.length;
    while (len > 0) {
        corners[0].classList.remove("corners");
        --len;
    }

}

.header{
    background: #4ABDAC;
    color: #fff;
    margin: 1px;
}


hr{
    border-top: 3px double #2a3132;
    
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #90afc5;
}

li{
    float: left;
    border: 2px solid #336b87;
    padding: 3px;
    margin: 3px;
}

li>a{
    display: block;
    color: #2a3132;
    text-decoration: none;
    padding: 10px 14px;
}

#color{
    margin-left: 150px;
}

#rect{
    margin-left: 100px;
}



li>a:hover{
    color: #763626;
    cursor: pointer;
}

#canvas{
    background: #66a5ad;
    position: relative;
    height: 1200px;
    width: 100%;
}

.corners{
    position: absolute;
    height: 10px;
    width: 10px;
    background:#fff;
    border: 1px solid black;
    display: none;
}
.selected .corners{
    display: inline-block;
}
.cornerUpLeft{

    top: -5px;
    left: -5px;

}

.cornerUpRight{

    top: -5px;
    right: -5px;

}

.cornerBtmLeft{

    bottom: -5px;
    left: -5px;


}
.cornerBtmRight{
 
    bottom: -5px;
    right: -5px;

}

.rectangle{
    position: absolute;
}




.colorBox{
    border: 1px solid black;
    height: 20px;
    width: 20px;
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sketch Board - Eyal Segal Project</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <script src="js/sketch.js"></script>
    </head>
    <body>
        <h1 class="header">Sketch Board</h1>
        <div>
            <ul class="toolbar">
                <li><a>Load</a></li>
                <li id="Save"><a>Save</a></li>
                <li id="rect"><a onclick="randRect()">Rectangle</a></li>
                <li><a onclick="randOval()">Oval</a></li>
            </ul>
            <hr>
        </div>

        
        <div class="canvas" id="canvas">
            
        </div>
    </body>
</html>

Answer 1

您只需将div id="canvas" 的.innerHTML 设置为localStorage。根本不需要 JSON 或循环。

另外，不要使用内联 HTML 事件属性 (onclick)。相反，使用现代的、基于标准的事件处理分别执行所有 JavaScript。

最后，<a> 元素不需要能够响应点击事件。实际上，您的 a 元素是无效的，因为它们没有 name 或 href 属性。 li 元素可以简单地为点击事件设置。

这是执行此操作的代码，但它不会在 Stack Overflow sn-p 环境中执行，但您可以看到它在工作 here。

// Get reference to the "canvas"
var can = document.getElementById("canvas");

// Save the content of the canvas to localStorage
function saveData(){
  localStorage.setItem("canvas", can.innerHTML);
}

// Get localStorage data
function restoreData(){
  can.innerHTML = localStorage.getItem("canvas");
}

// get load and save references
var load = document.getElementById("load");
var save = document.getElementById("save");

// Set up event handlers
load.addEventListener("click", restoreData);
save.addEventListener("click", saveData);

// Get references to the rect and oval "buttons" and set their event handlers
var rect = document.getElementById("rect");
rect.addEventListener("click", randRect);

var oval = document.getElementById("oval");
oval.addEventListener("click", randOval);

function randomizeColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

function randomizeRectangle() {
    var width = Math.random() * 700 + 50;
    var height = Math.random() * 250 + 50;
    if (height <= 20) {
        height = 20;
    }
    var posX = Math.round(Math.random() * window.innerWidth);
    var posY = Math.round(Math.random() * window.innerHeight);

    var randomRecObj = {
        "width": width + "px",
        "height": height + "px",
        "posX": posX,
        "posY": posY
    };
    return randomRecObj;
}

function makeShape() {
    var rect = randomizeRectangle();
    var rectDOM = document.createElement("div");
    rectDOM.className = "rectangle";
    rectDOM.style.border = "1px solid black";
    rectDOM.style.width = rect.width;
    rectDOM.style.height = rect.height;
    rectDOM.style.background = randomizeColor();
    rectDOM.style.top = rect.posY + "px";
    rectDOM.style.left = rect.posX + "px";
    //rectDOM.addEventListener("click", selectShape);
    // rectDOM.style.transform =rect.rotation;
    return rectDOM;

}

function randRect() {
    var rectDOM = makeShape();
    var canvas = document.getElementById("canvas");
    canvas.appendChild(rectDOM);
}

function randOval() {
    var ovalDOM = makeShape();
    ovalDOM.style.borderRadius = "50%";
    var canvas = document.getElementById("canvas");
    canvas.appendChild(ovalDOM);
}

function changeColor(){
    
}


function cancelSelection() {
    var selected = document.getElementsByClassName("selected");
    while (selected) {
        selected[0].classList.remove(selected[0]);
    }
}

function removeShape(event) {
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    while (len > 0) {
        selectedShapes[0].parentNode.removeChild(selectedShapes[0]);
        --len;
    }
}

function removeCorners(rectDom) {
    var corners = document.getElementsByClassName("corners");
    var len = corners.length;
    while (len > 0) {
        corners[0].classList.remove("corners");
        --len;
    }

}

.header{
    background: #4ABDAC;
    color: #fff;
    margin: 1px;
}


hr{
    border-top: 3px double #2a3132;
    
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #90afc5;
}

li{
    float: left;
    border: 2px solid #336b87;
    padding: 3px;
    margin: 3px;
}

li>a{
    display: block;
    color: #2a3132;
    text-decoration: none;
    padding: 10px 14px;
}

#color{
    margin-left: 150px;
}

#rect{
    margin-left: 100px;
}



li>a:hover{
    color: #763626;
    cursor: pointer;
}

#canvas{
    background: #66a5ad;
    position: relative;
    height: 1200px;
    width: 100%;
}

.corners{
    position: absolute;
    height: 10px;
    width: 10px;
    background:#fff;
    border: 1px solid black;
    display: none;
}
.selected .corners{
    display: inline-block;
}
.cornerUpLeft{

    top: -5px;
    left: -5px;

}

.cornerUpRight{

    top: -5px;
    right: -5px;

}

.cornerBtmLeft{

    bottom: -5px;
    left: -5px;


}
.cornerBtmRight{
 
    bottom: -5px;
    right: -5px;

}

.rectangle{
    position: absolute;
}




.colorBox{
    border: 1px solid black;
    height: 20px;
    width: 20px;
    list-style: none;
}

<h1 class="header">Sketch Board</h1>
        <div>
            <ul class="toolbar">
                <li id="load">Load</li>
                <li id="save">Save</li>
                <li id="rect">Rectangle</li>
                <li id="oval">Oval</li>
            </ul>
            <hr>
        </div>

        
        <div class="canvas" id="canvas">
            
        </div>