어떻게하면 draggable div 위치를 html로 저장할 수 있습니까?

Question

저는 html과 javascript에서 초보자이고 웹 응용 프로그램에서 save 버튼을 클릭 한 후 draggable div 위치를 저장하려고합니다. 내 질문에 내가 점점 데이터

여기에 내가 id, className, innerHTML로 divTags을 만든 자바 스크립트 코드

function WebSocket(){ 
    if ("WebSocket" in window){ 
    var channel = "hello"; 
    var socket = io.connect("my socket address here"); 

    socket.on(channel, function (d) { 
     var data = JSON.parse(d); 
     console.log(channel + " : " + d); 
     var theDiv = document.getElementById(data.node_info[1].info.mac); 
     if(theDiv == null) { 
     var divTag = document.createElement("div"); 
     divTag.id = data.node_info[1].info.mac; //"drag1" 
     divTag.className = "draggable js-drag"; 
     divTag.innerHTML = data.node_info[1].info.mac; 
     document.getElementsByTagName('body')[0].appendChild(divTag); 
     //document.getElementsByName('scroll_div')[0].appendChild(divTag); 
     //$('#'+data.node_info[1].info.mac).load('#'+data.node_info[1].info.mac); 
     } 
    }); 
    socket.on('crc_err', function(packet){ 
     console.log("crc_err : " + packet); 
    }); 
    socket.on('type_err', function(packet){ 
     console.log("type_err : " + packet); 
    }); 
    } else{ 
    // The browser doesn't support WebSocket 
    // alert("WebSocket NOT supported by your Browser!"); 
    } 
} 

에서 웹 소켓에서 만드는 나의 드래그 된 div이며, 이들 각각에 대한 웹 소켓을 사용하고 다른 사람과 조금 다르다 mac 주소를 보여주고 html의 본문에 넣습니다.

또한 사용자가 내 웹 앱을 다시 방문 할 때 드래그 가능한 div가 마지막으로 동일한 위치에 배치되기를 바랍니다.

어떻게하면 좋을까요?

미리 감사드립니다.

추신 : 당신이 내 CSS 코드 또는 HTML의 더 많은 코드가 필요하면 내가 할 수있는 편집

Answer 1

를 사용하여 로컬 스토리지는

다시

를로드하려면

localStorage.setItem(divTag.id + '-X', leftPosition); 
localStorage.setItem(divTag.id + '-Y', topPosition); 

을 저장하려면

divTag.style.left = localStorage.getItem(divTag.id + '-X') + 'px'; divTag.style.top = localStorage.getItem(divTag.id + '-Y') + 'px';