Cookie、拖拽、通信

最新推荐文章于 2025-05-28 18:15:13 发布

pcコンメンット

最新推荐文章于 2025-05-28 18:15:13 发布

阅读量104

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_65214572/article/details/126630456

版权

Cookie

1.产生于服务器端保存于客户端

2.面向服务器得同一服务器/作用域得cookie是共享

不同服务器cookie不共享大小限制4k

获取cookie get参数:键名/属性名

//引入cookie库

//创建一个cookie

Cookies.set("name","this is a test cookie",{ expires: 7 })

//获取cookie

console.log(Cookie.get('name'));

//移除cookie

Cookies.remove('name');

web存储

sessionStorage 会话存储针对于选项卡选项卡关闭选项卡关闭或者浏览器关闭会话失效传输数据最大4kb

localStorage 本地存储，存到本地磁盘中，即使浏览器关闭数据依然在

拖拽

拖拽事件：dragstart、drag、dragend

放置事件：dragenter、dragover、drop

拖拽事件流触发顺序：dragstart->drag->dragenter->dragover->drop->dragend

window.onload = function () {
      var childs = document.querySelectorAll('.child');
      var parent = document.querySelector('.parent');
      // console.log(childs);
      childs = Array.from(childs);
      childs.forEach((item, index) => {
        // 开始拖放
        item.ondragstart = function (event) {
          console.log('ondragstart');
          // console.log(event);
          event.dataTransfer.setData('id', item.id);
        }
        // 正在拖放
        item.ondrag = function () {
          console.log('ondrag');
        }
        // 拖放结束
        item.ondragend = function () {
          console.log('ondragend');
        }
        // console.log(item, index);
      });
      // parent放置事件
      // 进入目标元素
      parent.ondragenter = function () {
        console.log('ondragenter');
      }
      // 在目标元素内活动
      parent.ondragover = function (event) {
        console.log('ondragover');
        // 设置目标元素可放置
        event.preventDefault();
      }
      // 将拖放元素放置到目标元素内
      parent.ondrop = function (event) {
        console.log('ondrop');
        // 获取数据传输对象内的数据，通过数据获取节点，放置节点
        var id = event.dataTransfer.getData('id');
        //id="one"
        var dom = document.querySelector("#" + id);
        this.appendChild(dom);
        // 阻止冒泡
        event.stopPropagation();
      }

      document.body.ondragover = function (event) {
        event.preventDefault();
      }

      document.body.ondrop = function (event) {
        console.log('ondrop');
        // 获取数据传输对象内的数据，通过数据获取节点，放置节点
        var id = event.dataTransfer.getData('id');
        //id="one"
        var dom = document.querySelector("#" + id);
        this.appendChild(dom);
        event.stopPropagation();
      }

通信

当a页面通过window.open方法打开b页面，或者在a也米娜中通过iframe嵌套b页面，下让a中数据传递到b中就可以使用跨文档信息传输

1.通过window.open打开b页面
A1页面打开新窗口
 window.onload=function(){
            // 获取button按钮
            var btn=document.querySelector('button');
            // 获取发送数据按钮
            var sendBtn=document.querySelector('#send');
            // 点击btn 打开一个新窗口
            var win; 
            btn.onclick=function(){
                win=window.open('./B1.html')
            }
            // 点击send按钮 发送消息给B1窗口
            sendBtn.onclick=function(){
                win.postMessage('hello','http://127.0.0.1:5500')
            }
  }
  B1页面接受传递过来的消息
  window.onmessage=function(event){
            // 接收到的数据
            console.log(e.data);
            // 数据的来源
            console.log(e.origin)
  }
2.通过内联框架
  <script>
    window.onload = function () {
      var btn = document.querySelector('button');
      var sendBtn = document.querySelector('#send');
      var iframeBtn = document.querySelector('#iframe');
      var win;
      btn.onclick = function () {
        // 打开新页面
        win = window.open('./B1.html');
        //win.postMessage('hello', '*');
        console.log(win);
      }
      sendBtn.onclick = function () {
        //发送消息
        // win.postMessage('hello', '*');
        var obj = { name: 'zhangsan', age: 12 };
        win.postMessage(obj, 'http://127.0.0.1:5500');
        // win.postMessage('hello', 'http://127.0.0.1:5500');
        // win.postMessage('hello');
      }

      iframeBtn.onclick = function () {
        //获取b1内联窗口，使用窗口发送数据
        win = document.querySelector('iframe').contentWindow;
      }

    }
  </script>
<body>
  <button>打开B1页面(获取B1窗口）</button>
  <button id="send">发送数据</button>
  <button id="iframe">给内联框架发送消息（获取内联B1窗口）</button>
  <!-- 内联窗口  -->
  <iframe src="./B1.html" frameborder="0"></iframe>
</body>