2017-06-27 94 views
0

我想保存和恢復DIV的數據 - 這是其他的div容器,如何在本地存儲中保存div的innerHTML?

爲了讓我使用本地存儲和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的內容,並且當用戶點擊「加載」時加載它)這是最簡單的...)

注意:「畫布」只是主格的ID,而不是真正的「畫布」。

function randomizeColor() { 
 
    var letters = 'ABCDEF'; 
 
    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>

+0

爲DOM元素添加到'canvas',你必須使用''元素。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas –

+0

我很笨,而「畫布」只是這個班的Id。正如你所看到的 - 你可以在沒有它的情況下向DOM添加元素。 –

回答

0

所有你需要做的是設置div id="canvas".innerHTMLlocalStorage。根本不需要JSON或循環。

此外,不要使用內聯HTML事件屬性(onclick)。相反,使用現代的,基於標準的事件處理單獨完成所有的JavaScript。

最後,沒有必要使<a>元素能夠響應點擊事件。實際上,您的a元素無效,因爲它們無論如何都沒有namehref屬性。 li元素可以簡單地設置爲點擊事件。

這是代碼做到這一點,但它不會在堆棧溢出片段環境中執行在這裏,但你可以看到它的工作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 = 'ABCDEF'; 
 
    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>