本地存储

     本地存储：可以将数据存储本地的技术
     字符，不安全
     cookie：
         大小4K，时间，随着http发给服务器
     HTML5新增的API：localstorage,sessionStorage
         大小5M，时间：永久/会话级，不会随着http发给服务器
     localstorage和sessionStorage：
         永久/会话
     window身上的子对象localstorage
     console.log(window.localStorage)
     console.log(localStorage)

     localStorage对象，使用对象的操作：点，中括号，delete关键字
    
     使用对象操作
     localStorage.name = "admin";
     localStorage.name = "root";
     console.log(localStorage.name)
     delete localStorage.name;

     使用方法操作
     localStorage.setItem("name","qwe")
     localStorage.setItem("a","1")
     localStorage.setItem("b","2")
     localStorage.setItem("c","3")
     localStorage.setItem("b","666")

     console.log(localStorage.getItem("name"))
     console.log(localStorage.getItem("a"))
     console.log(localStorage.getItem("b"))
     console.log(localStorage.getItem("c"))
     console.log(localStorage.getItem("d"))

     localStorage.removeItem("name")
     localStorage.removeItem("a")
     localStorage.removeItem("b")
     localStorage.removeItem("c")

     localStorage.clear(); //清除所有

利用storage实现同步拖拽

<script>
    class Move{
        constructor(){
            this.box=document.querySelector(".box")
            this.init();
            this.getPos();
        }
        getPos(){
            this.pos=localStorage.getItem("pos")?JSON.parse(localStorage.getItem("pos")):{}; //
            this.box.style.left=this.pos.x+"px";
            this.box.style.top = this.pos.y + "px";
        }
        init(){
            var that=this;
            this.box.onmousedown=function (eve) {
                var e1=eve||window.event;
                console.log(1)
                document.onmousemove=function (eve) {
                    var e2=eve||window.event
                    that.box.style.left=e2.clientX-e1.offsetX+"px";
                    that.box.style.top=e2.clientY-e1.offsetY+"px";

                    var obj={
                        x:that.box.offsetLeft,
                        y:that.box.offsetTop
                    };
                    localStorage.setItem("pos",JSON.stringify(obj));
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
            };

        }


    }

    new Move();
</script>

<script>
    this.box=document.querySelector(".box")
    this.pos=localStorage.getItem("pos")?JSON.parse(localStorage.getItem("pos")):{}; //
    this.box.style.left=this.pos.x+"px";
    this.box.style.top = this.pos.y + "px";
    onstorage=function () {
        this.pos=localStorage.getItem("pos")?JSON.parse(localStorage.getItem("pos")):{}; //
        this.box.style.left=this.pos.x+"px";

        this.box.style.top = this.pos.y + "px";
    }

</script>

htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}

    </style>
</head>
<body>
<div class="box"></div>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{width:100px;height:100px;background: green;position: absolute;left:0;top:0;}

    </style>
</head>
<body>
<div class="box"></div>
</body>