本地存儲

時間 2019-11-12

標籤本地存儲简体版

原文原文鏈接

     本地存儲：能夠將數據存儲本地的技術
     字符，不安全
     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實現同步拖拽html

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。