Добрый день. Есть div , который имеет начальные координаты и двигается по стрелкам. Нужно сделать так , чтобы при перемещении его и остановке , я обновил страницу , а он остался в том же положении. Тоесть я так понял нужно заносить эти координаты в localStorage? И как это происходит?
Вот код :
html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.1.1.min.js"></script>
<script defer src="1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="canvas">
<div id="one">
</div>
<div class='border'> </div>
</div>
</body>
</html>
js :
var timerLeft;
var timerRight;
var timerUp;
var timerDown;
var a = 1;
document.querySelector("#one").style.left = "630px";
document.querySelector("#one").style.top = "240px";
function right(){
var i;
timerRight = setInterval(function(){
i = document.querySelector("#one").style.left;
i = i.slice(0,-2);
i = +i +1;
if (i >=861) {i = 410};
i += "px";
localStorage.getItem('px',i);
document.querySelector("#one").style.left =i;
},1)
};
function left(){
var i;
timerLeft = setInterval(function(){
i = document.querySelector("#one").style.left;
i = i.slice(0,-2);
i = +i -1;
if (i <= 401) {i = 800};
i += "px";
document.querySelector("#one").style.left =i;
},1)
};
function down(){
var i;
timerDown = setInterval(function(){
i = document.querySelector("#one").style.top;
i = i.slice(0,-2);
i = +i +1;
if (i >= 470) {i = 10};
i += "px";
document.querySelector("#one").style.top =i;
},1)
};
function up(){
var i;
timerUp = setInterval(function(){
i = document.querySelector("#one").style.top;
i = i.slice(0,-2);
i = +i -1;
if (i <= 10) { i = 420};
i += "px";
document.querySelector("#one").style.top =i;
if (document.querySelector("#one").style.top == "9px") {document.querySelector("#one").style.top = "422px";}
},1)
};
function stop() {
clearInterval(timerUp);
clearInterval(timerDown);
clearInterval(timerLeft);
clearInterval(timerRight);
}
$(document).keydown(function(key){
clearInterval(timerUp);
clearInterval(timerDown);
clearInterval(timerLeft);
clearInterval(timerRight);
/*Right 39*/
if (key.keyCode === 39) {clearInterval(timerLeft); right();};
/*down 40*/
if (key.keyCode === 40) {clearInterval(timerUp); down();};
/*top 38*/
if (key.keyCode === 38) {clearInterval(timerDown); up();};
/*left 37*/
if (key.keyCode === 37) {clearInterval(timerRight); left();};
//clearInterval(timer);
console.log(key);
/*r 82*/
if (key.keyCode === 82) {clearInterval(timer);};
});