前端存储、拖拽事件、跨文档通信

最新推荐文章于 2023-11-02 15:46:17 发布

恬淡如雪

最新推荐文章于 2023-11-02 15:46:17 发布

阅读量281

点赞数

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/qq_48639265/article/details/126629550

版权

前端存储

分为cookie和WebStorage,WebStorage分为sessionStorage和localStorage；
cookie特点，产生于服务器端，保存在客户端，同一服务器下的cookie共享的，传输数据最大为4kb；
sessionStorage会话存储，针对于选项卡，选项卡关闭或者浏览器关闭，会话失效，传输数据可以达到5M；
localStorage本地存储，将数据存到本地磁盘中，即使选项卡关闭或者浏览器关闭，数据依旧存在，传输数据可以达到5M；
方法cookie、sessionStorage、localStorage。

1.创建一个cookie,7天后过期

<!-- js-cookie库操作cookie -->
    <!-- 引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
    <script>
        console.log(Cookies, '打印cookies');
        // 设置Cookies 参数：key value 设置过期时间
        Cookies.set('status', '正常', { expires: 7 });
        Cookies.set('gender', 'male', { expires: 7 });

        // 获取cokie  get参数：键名/属性名
        console.log(Cookies.get('status'));
        console.log(Cookies.get('gender'));
        // 移除cookie remove 参数：属性名
        Cookies.remove('status');
    </script>

2.WebStorage

//1. sessionStorage 会话存储特点
    //页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
   //打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
   //关闭对应浏览器tab，会清除对应的sessionStorage。
	//sessionStorage 实例方法
   		 // 设置内容
        sessionStorage.setItem('name','terry');
        // 获取内容
        console.log(sessionStorage.getItem('name'));
        // 清空内容的属性值
        // sessionStorage.clear();
        // 清空内容
        sessionStorage.removeItem('name')	
//2. localStorage 本地存储 存到本地磁盘中，即使浏览器关闭数据依然在。
	 // 设置内容
        localStorage.setItem('name','larry');
        // 获取内容
        console.log(localStorage.getItem('name'));
        // 清空内容
        localStorage.clear()
        // 清空内容
        // localStorage.removeItem('name')

拖拽事件

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

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

拖放事件：拖放元素使用，on拖放事件类型。

dragstart(开始拖放) drag(正在拖放) dragend(拖放结束)

放置事件： 放置元素使用，on放置事件类型。

dragenter(进入放置元素) dragover(放置元素内移动) drop(放置在放置元素内)

传输数据：event.dataTransfer.setData(); 开始拖放事件。

获取数据: event.dataTransfer.getData();放置事件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>
        body {
            height: 400px;
        }

        .parent {
            height: 200px;
            border: 2px solid crimson;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: rgb(255, 200, 0);
            color: #fff;
            float: left;
            margin: 10px 0 0 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var parent = document.querySelector('.parent');
            var childs = document.querySelectorAll('.child');
            childs = [...childs];
            // 给每一个孩子节点绑定事件
            // childs.forEach(function (item) {
            //     item.onclick = function () {
            //         parent.appendChild(this);
            //     }
            // })

            childs.forEach(function (item) {
                // 拖动事件
                // 开始拖动
                item.ondragstart = function (event) {
                    console.log('开始拖动');
                    // 将拖动元素id传出去
                    // dataTransfer.setData 传输数据 key value
                    console.log(item);
                    event.dataTransfer.setData('id', item.id)
                }
                item.ondrag = function () {
                    console.log('ondrag正在拖动');
                }
                item.ondragend = function () {
                    console.log('ondragend拖动结束');
                }
            })

            // 放置元素 ---放置元素 parent
            // 进入到放置元素
            parent.ondragenter = function () {
                console.log('ondragenter进入到放置元素');
            }
            // 在放置元素内移动
            parent.ondragover = function (event) {
                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 (event) {
                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>

跨文档通信

跨文档数据传输

在A页面中通过window.open方式打开B页面，或者在A页面中通过iframe嵌套B页面，我们想让A中的数据传递到B中，就可以使用跨文档消息传输。

通过window.open打开b页面

 //A页面
<a href="./B页面.html?name=zhangsan&age=12">去B页面</a>

//B页面
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>

    <script>
        console.log(location, '关于当前页面的信息');
        var str = location.search;
        str = str.slice(1);
        // console.log(Qs.parse(str));
        str = str.split('&');//[ "name=zhangsan", "age=12" ]
        // console.log(str);
        str = str.map(function (item) {
            return item.split('=')
        });
        console.log(str); 
        var obj = {};
        str.forEach(function (item) {
            console.log(item);
            obj[item[0]] = item[1];

        })
        console.log(obj); //{ name: "zhangsan", age: "12" }
    </script>
</head>

<body>
    B页面
</body>

通过内联框架

A页面

<!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>
    <script>
        window.onload = function () {
            var btn1 = document.querySelector('button');
            var btn2 = document.getElementsByTagName('button')[1];
            var btn3 = document.getElementsByTagName('button')[2];
            // 给按钮绑定点击事件
            var win;
            btn1.onclick = function () {
                // 返回我们打开页面窗口
                window.open('./B1页面.html');
            }
            btn2.onclick = function () {
                // 发送数据 参数：要发送的数据 发送的域名 *
                win.postMessage('hello', '*');
            }

            btn3.onclick = function () {
                // 获取内联框架的窗口 --->B1页面
                win = document.querySelector('iframe').contentWindow;
            }
        }
    </script>
</head>

<body>
    <!-- A1页面 使用 -->
    <button>打开B1页面</button>
    <button>发送数据</button>
    <button>使用内联框架发送数据</button>
    <br>
    <iframe src="./B1页面.html" frameborder="0"></iframe>
    <iframe width="320" height="85" frameborder="0" scrolling="no" hspace="0"
        src="https://i.tianqi.com/?c=code&a=getcode&id=6&py=chongqing&icon=1"></iframe>
    <iframe width="680" height="260" frameborder="0" scrolling="no" hspace="0"
        src="https://i.tianqi.com/?c=code&a=getcode&id=13&py=chongqing&icon=1"></iframe>

</body>

</html>

B页面

<!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>
        body {
            height: 400px;
            background-color: rgb(235, 224, 165);
        }
    </style>
    <script>
        // onmessage 接收数据
        window.onmessage = function (event) {
            // 接收数据
            console.log(event.data); //hello
            // 地址来源
            console.log(event.origin); //null
        }
    </script>
</head>

<body>
    B1页面
</body>

</html>