How to save innerHTML of div in a local storage?

Question

I want to save and restore data from div - that is container of other divs,

In order to make it I use local storage and JSON like this:

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);
    }

However, I don't know how to access the innerHTML of the elements and save it or restore it.

What do you think I shall do?

(To be more detailed - I need to save the content of the div when user click on "save", and load it when the user click "load". This is a snippest of it...)

NOTICE: the "canvas" is just the id of the main div, and not a real "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

All you need to do is set the .innerHTML of the div id="canvas" into localStorage. There's no need for JSON or loops at all.

Also, don't use inline HTML event attributes (onclick). Instead, do all your JavaScript separately using modern, standards based event handling.

Lastly, there is no need for <a> elements to be able to respond to a click event. Actually, your a elements are invalid as they don't have a name or href attribute anyway. The li elements can simply be set up for click events.

This is the code to do it but it won't execute here in the Stack Overflow snippet environment, but you can see it working 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>