0719知识点图片拖动 localstorage和sessionstorage区别及解释

本文链接：https://blog.csdn.net/m0_56381561/article/details/125875927

图片拖动知识点

元素在拖动下会触发以下事件

　　在被拖动目标上触发的事件

　　　　ondragstart——即用户开始拖动元素时触发

　　　　ondrag -——元素正在拖动时触发

　　　　ondragend - 用户完成元素拖动后触发

在其他对象容器中触发的事件

　　　　ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

　　　　ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

　　　　ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

　　　　ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #result {
        width: 300px;
        height: 300px;
        border: 1px solid coral;
        margin-bottom: 30px;
    }
</style>

<body>
    <p>请将下面图片拖入到框中</p>
    <!-- ondragstart：该事件表示拖放开始 -->
    <!-- ondragover:该事件表示拖放结束
        ondrag:该事件拖放过程 -->
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
    <!-- draggable:值为true时表示元素可以拖动,默认为false,表示不能拖动 -->
    <img id="adc" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
    <script type="text/javascript">
        //用于拖放函数
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }
        //拖动过程
        function drop(ev) {
            //允许其他元素体拖带此处
            ev.preventDefault();
            //获取要拖放元素的id
            var id = ev.dataTransfer.getData("text");
            // 将一个标签添加到另一个标签中，可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }
        //拖动结束
        function allowDrag(ev) {
            //允许其他元素体拖带此处
            ev.preventDefault();
        }
    </script>
</body>

</html>

效果图

localstorage和sessionstorage区别及解释

sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

生命周期

localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

　　　　　　 sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

WebStorage的目的

是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标

提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

localStorage（本地存储）和sessionStorage（会话存储）。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="点击" onclick="clickCout()">
    <div id="result"></div>
    <script type="text/javascript">
        function clickCout() {
            if (localStorage.click_num) {
                localStorage.click_num = parseInt(localStorage.click_num) + 1;
            } else {
                localStorage.click_num = 1;
            }
            document.getElementById("result").innerHTML = localStorage.click_num;
        }
    </script>
</body>

</html>

效果图