H5API当中的Web存储 拖拽 通信

1、web存储

1.1cookie

cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；通常通过js-cookie这个库来操作cookie

 <!-- js-cookie库操作cookie -->
  <!-- 引入js-cookie库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
  <script>
    // console.log(Cookies, '打印');
    // 设置cookies  参数：key value  设置过期时间
    Cookies.set('name', 'larry', { expires: 7 })
    // Cookies特点：
    // 1.产生于服务器端   保存与客户端
    // 2.面向服务器的  同一服务器的cookie是共享的  不同时期的服务器不共享  并且有大小限制4k
  </script>

<!-- js-cookie库操作cookie -->
  <!-- 引入js-cookie库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
  <script>
    // console.log(Cookies, '打印');
    // 设置cookies  参数：key value  设置过期时间
    Cookies.set('status', '正常', { expires: 7 });
    Cookies.set('gender', '正常', { expires: 7 });
    // Cookies特点：
    // 1.产生于服务器端   保存与客户端
    // 2.面向服务器的  同一服务器/作用域的cookie是共享的  不同时期的服务器不共享  并且有大小限制4k
    // 获取cookie  get:键名：属性值
    console.log(Cookies.get('status'));
    console.log(Cookies.get('gender'));
    // 移除cookie
    Cookies.remove('status')

1.2.sessionStorage

<script>
    // 会话存储sessionStorage  针对于浏览器选项卡的存储
    // 只要选项卡关闭  会话就失效
    // 四个方法    setItem(key,value) getItem(key)
    //  clear()无参数：清除所以的会话存储   removeItem(key) 清除key对应的会话存储
    // 设置会话存储
    sessionStorage.setItem('name', 'terry');
    sessionStorage.setItem('age', '18');
    // 获取会话存储
    console.log(sessionStorage.getItem('name'));
    // 清除会话存储  参数：键名
    // sessionStorage.removeItem('name')
    // 清除全部的会话存储
    // sessionStorage.clear();

1.3.localStorage

<script>
    // 本地存储
    // 特点：将数据存储在本地磁盘，即使选项卡和浏览器关闭，数据依旧存在
    // 除非手动删除 否则会一直存储在本地磁盘中  传输的数据5M甚至更大
    // setItem(key,value)  getItem(key)   removeItem(key)  clear()
    localStorage.setItem('name', '产品名称');
    localStorage.setItem('age', '12');
    // 获取本地存储
    console.log(localStorage.getItem('age'));
    // 移除本地存储
    localStorage.removeItem('name');
    // 全部移除
    localStorage.clear();
  </script>

Web存储
Cookie  存储少量数据，面向服务器的，同一个服务器的cookie是共享的，最大4kb
WebStorage
  sessionStorage 会话存储，选项卡 选项卡关闭,会话失效  --写项目推荐使用
  localStorage 本地存储，存到本地磁盘中，即使浏览器关闭数据依然在。

2.拖拽事件

2.1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
dragstart->drag->dragenter->dragover->drop->dragend
-----------------------------------------------------------------------
2.2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

<script>
    window.onload = function () {
      // 获取parent  和child
      var parent = document.querySelector('.parent')
      var child = document.querySelectorAll('.child')
      console.log(parent, child);
      childs = Array.from(child)
      console.log(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
          event.dataTransfer.setData('id', item.id)
        }
        // 正在拖动
        item.ondrag = function () {
          console.log('ondrag正在拖动');
        }
        // 拖动结束
        item.ondragend = function () {
          console.log('ondragend拖动结束');
        }

      })

      // 放置事件
      parent.ondragenter = function () {
        console.log('ondragenter 进入放置元素');
      }
      // 在放置元素内移动
      parent.ondragover = function () {
        console.log('ondragover 正在放置元素内移动');
        // 将放置元素设置为可放置  因为默认是不可以放置的
        event.preventDefault()
      }
      // 将拖动元素放置到放置元素
      parent.ondrop = function () {
        // 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 () {
        // 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 拖动事件：dragenter   drag   dragend-->
  <div class="parent"></div>
  <!-- 设置当前元素可拖拽 draggable="true"表示可以拖拽-->
  <div class="child" draggable="true" id="one">one</div>
  <div class="child" draggable="true" id="two">two</div>
  <div class="child" draggable="true" id="three">three</div>
  <div class="child" draggable="true" id="four">four</div>

3.通信

跨文档消息传输

H5提供了网页文档之间互相接收与发送消息的功能。当在a页面中通过window.open方法打开b页面，或者在a页面中通过iframe嵌套b页面，我们想让a中的数据传递到b中就可以使用跨文档消息传输

3.1.通过window.open打开b页面

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

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;   //?name=zhangsan&age=12
    str = str.slice(1)
    // Qs.parse()//将查询字符串转化成js对象
    // console.log(Qs.parse());
    str = str.split('&') //['name=zhangsan','age=12']
    str = str.map(function (item) {
      return item.split('=')
    })
    console.log(str);  //[[name,zhangsan],[name,age]]
    var obj = {};
    str.forEach(function (item) {
      console.log(item);
      obj[item[0]] = item[1]   //obj.name=zhangsan
    })
    console.log(obj);
  </script>
</head>

<body>
  B页面
</body>

3.2.通过内联框架

A页面
<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 () {
        // 返回打开页面的窗口
        win = window.open('./B1页面.html');
      }

      btn2.onclick = function () {
        // 发送数据   参数两个：要接收的数据  发送到哪一个地址
        win.postMessage('hello', '*')
      }

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

<body>
  <!-- 1.在 -->
  <button>打开B1页面</button>
  <button>发送数据</button>
  <button>使用内联框架发送数据</button>
  <!-- 2.使用内联框架实现跨文档通信 -->
  <iframe src="./B1页面.html" frameborder="0"></iframe>

B页面
 <style>
    body {
      height: 400px;
      background-color: cyan;
    }
  </style>
  <script>
    window.onmessage = function (event) {
      // 接收数据
      console.log(event.data);
      // 地址来源
      console.log(event.origin);
    }
  </script>
</head>

<body>
  B1页面
</body>