H5API --- 存储、拖拽、通信

1.Web存储

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

1.Cookie //创建一个cookie,7天后过期
Cookies.set("name","this is a test cookie",{ expires: 7 }) 
//获取cookie
console.log(Cookie.get('name'));
//移除cookie
Cookies.remove('name')
// 只针对于服务器,同一个服务器可以共享cookie。存储少量数据，面向服务器的 4kb

2.WebStorage
	sessionStorage 会话存储 选项卡
    localStorage 本地存储 存到本地磁盘中，即使浏览器关闭数据依然在。
//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')

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

2.拖拽

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。

拖动事件：dragstart、drag、dragend

放置事件：dragenter、dragover、drop

拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发

dragstart->drag->dragenter->dragover->drop->dragend

在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

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();
      }

3.通信

H5提供了网页文档之间互相接收与发送消息的功能。当在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>