关于web/前端存储（cookie,sessionStorage,localStorage），以及拖拽事件

原创已于 2022-09-01 17:02:10 修改 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-08-31 22:58:17 首次发布

本文详细介绍了前端存储中的cookie和WebStorage（包括sessionStorage和localStorage），并重点解析了HTML5的拖拽事件，包括拖动开始、拖动中、拖动结束及放置事件的状态，并提供了一个实际的拖拽操作示例。通过这个案例，读者可以理解拖拽事件的工作流程及其在网页交互中的应用。

前端存储的问题是在面试中比较容易问到的问题，下面总结一下前端存储的相关知识。首先，分为两大类：cookie和WebStorage

1.cookie

特点：产生于服务器端，保存于客户端；面向服务器，同一服务器下的cookie是共享的，不同服务器就不共享；它传输数据限制大小为4k以内，所以一般不会用cookie来存储数据

2.WebStorage

Webstorage分为sessionStorage和localStorage

sessionStorage:会话存储，针对选项卡，只要选项卡或者浏览器关闭，会话就会失效，数据最大可以传输5M

localStorage:本地存储，即将数据存储到磁盘中，关闭选项卡或浏览器数据还会存在，数据最大可以传输5M

3.拖拽事件

拖拽技术是H5中新增的，允许用户在网页内部或者浏览器与其它程序进行拖拽，拖拽可以传递数据。

拖拽元素：设置当前元素可拖拽，draggable='true'

放置元素：默认是不可以放置的，所以要取消默认，event.preventDefault()

拖动事件可以分为三个状态：1.开始拖动（ondragstart）;2.正在拖动（ondrap）

3.拖动结束（ondragend）

放置事件同样有三个状态：1.进入放置元素（dragenter）;2.放置元素内移动（dragover）

3.drop(放置在放置元素内)

拖拽事件流的流程：

dragstart->drag->dragenter->dragover->drop->drapend

下面我们通过一个案例来描绘拖拽事件：

<!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>
    <style>
        .parent {
            height: 200px;
            border: 2px solid cyan;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            float: left;
            margin: 10px 0 0 10px;
        }
        
        body {
            height: 400px;
        }
    </style>
    <script>
        window.onload = function() {
            // 获取parent和child
            var parent = document.querySelector('.parent');
            var childs = document.querySelectorAll('.child');
            childs = Array.from(childs);
            // 给每一个孩子节点绑定事件
            // childs.forEach(function(item){
            // 	item.onclick=function(){
            // 		parent.appendChild(this)
            // 	}
            // });
            childs.forEach(function(item) {
                    // 拖动事件 
                    // 开始拖动 on事件类型
                    item.ondragstart = function(event) {
                            console.log('ondragstart开始拖动了');
                            // console.log(event,'事件对象');
                            // 将拖动元素得id传出去
                            // dataTransfer.setData 传输数据 key value
                            console.log(item.id);
                            event.dataTransfer.setData('id', item.id);
                        }
                        // 正在拖动
                    item.ondrag = function() {
                            console.log('ondrap正在拖动');
                        }
                        // 拖动结束
                    item.ondragend = function() {
                        console.log('ondragend拖动结束');
                    }
                })
                // 放置事件 --放置元素 parent
                // 进入到放置元素
            parent.ondragenter = function() {
                    console.log('ondragenter进入到放置元素');
                }
                // 在放置元素内移动
            parent.ondragover = function() {
                    console.log('ondragover正在放置元素内移动');
                    // 将放置元素设置为可放置
                    event.preventDefault();
                }
                // 将拖动元素放置到放置元素
            parent.ondrop = function(event) {
                    console.log('ondrop放置');
                    //获取拖动元素传输得数据getData(key)
                    // console.log(event.dataTransfer.getData('id'),'事件对象');
                    var id = event.dataTransfer.getData('id');
                    this.appendChild(document.querySelector('#' + id))
                        // 阻止事件冒泡
                    event.stopPropagation()
                }
                // 将拖动元素放置到body
            document.body.ondragover = function() {
                    console.log('ondragover正在放置元素内移动');
                    // 将放置元素设置为可放置
                    event.preventDefault();
                }
                // 将拖动元素放置到放置元素
            document.body.ondrop = function(event) {
                console.log('ondrop放置');
                //获取拖动元素传输得数据getData(key)
                // console.log(event.dataTransfer.getData('id'),'事件对象');
                var id = event.dataTransfer.getData('id');
                this.appendChild(document.querySelector('#' + id))
                    // 阻止事件冒泡
                event.stopPropagation()
            }


        }
    </script>
</head>

<body>
    <!-- 放置元素:parent  放置事件:dragenter dragover drop-->
    <!-- 拖动元素:child 拖动事件：dragstart drag dragend-->
    <div class="parent"></div>
    <!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 -->
    <div class="child" id="one" draggable="true">one</div>
    <div class="child" id="two" draggable="true">two</div>
    <div class="child" id="three" draggable="true">three</div>
    <div class="child" id="four" draggable="true">four</div>
</body>

</html>