H5API ---（Web存储-拖拽事件-通信-websocket-geolocation）

今天你四百冷了吗

于 2022-09-19 16:42:45 发布

阅读量186

点赞数

文章标签：前端 websocket javascript

本文链接：https://blog.csdn.net/weixin_48931100/article/details/126698330

版权

文章目录

Web存储
拖拽
- 拖拽元素
- 放置元素
通信
- 通过window.open()/通过内联框架
websocket
- 为什么有了http还需要推出websocket？
- websocket的优势
geolocation

Web存储

cookie

为了弥补HTTP的无状态，cookie就出现了
cookie其实就是一种存储机制

当我们第一次请求网页内容的时候是没有任何cookie的，服务器在收到请求之后会在HTTP响应头添加头部Set-Cookie，并且在Set-Cookie里进行标识，在下一次请求的时候浏览器就会在HTTP请求中添加头部Cookie并且用上Set-Cookie里的标识，这样服务器就可以给不同用户匹配不同的内容了。

也就是说，当服务器给了浏览器Set-Cookie之后，以后每一次浏览器发送HTTP请求都需要把cookie数据传送给服务器，但这也会导致带宽资源很紧张，因此cookie能传递的数据不能超过4KB；

cookie的特点：

产生于服务器端，保存在浏览器端
存储少量数据，面向服务器的，最大4KB
同一个服务器的cookie是共享的

<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>
    <!-- 通常通过js-cookie这个库来操作cookie -->
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
</head>

<body>
  <script>
    // console.log(Cookies);
    //设置Cookies 参数：key value 设置过期时间
    Cookies.set('name', 'Spylent', { expires: 7 })//创建一个cookie,7天之后过期
  </script>
</body>

</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 src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
</head>

<body>
  <script>
    Cookies.set('age', 12, { expires: 7 })
  </script>
</body>

</html>

在这里插入图片描述

WebStorage

随着HTML5的推出，WebStorage就出现了，包含了两个对象：localStorage和sessionStorage；

当用户第一次请求服务器时，服务器响应内容并且附加可操控网页的JS，当用户操作JS进行个人设置的时候，这些个人设置就可以通过Web存储机制保存在浏览器里了；

sessionStorage

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器tab，会清除对应的sessionStorage。

sessionStorage的特点：

针对于选项卡的存储
只要选项卡关闭/浏览器关闭会话就失效
存储数据可以达到5MB甚至更大

实例方法

setItem()
getItem()
removeItem()
clear()

<!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>
    sessionStorage.setItem('name', 'Spylent')
    sessionStorage.setItem('age', 19)
    sessionStorage.setItem('obj', JSON.stringify({ name: 'taoie' }))

    console.log(sessionStorage.getItem('name'))
    console.log(JSON.parse(sessionStorage.getItem('obj')))

    sessionStorage.removeItem('age')

    sessionStorage.clear()
  </script>
</head>

<body>

</body>

</html>

localStorage

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

localStorage的特点：

将数据存储到本地磁盘即使选项卡和浏览器关闭数据依旧存在
除非手动删除否则数据一直存在本地磁盘中传输的数据5M甚至更大

实例方法

setItem()
getItem()
removeItem()
clear()

<!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>
    //本地存储：localStorage
    //将数据存储到本地磁盘 即使选项卡和浏览器关闭数据依旧存在
    //除非手动删除 否则数据一直存在本地磁盘中 传输的数据5M甚至更大
    //四个方法:
    //setItem(key,value) getItem(key) clear() removeItem(key)

    // localStorage.setItem('name', '产品名称')
    localStorage.setItem('age', 13)
    console.log(localStorage.getItem('name'))
    localStorage.removeItem('age')
    localStorage.clear()
  </script>
</head>

<body>

</body>

</html>

拖拽

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

拖拽元素

在拖动目标上触发的拖动事件，作用在被拖拽元素上：

ondragstart：用户开始拖动元素时触发
ondrag：元素正在拖动时触发
ondragend：用户完成元素拖动后触发

放置元素

拖动目标放置时的放置事件，作用在放置元素上：

ondragenter：进入放置容器范围内触发
ondragover：拖动元素在容器范围内拖动时触发
ondragleave：拖动元素离开容器范围时触发
ondrop：释放鼠标键时触发

拖拽过程中的事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
ondragstart->ondrag->ondragenter->ondragover->ondrop->ondragend

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

setData(k,v)：用于声明所发生的数据与类型
getData(k)：返回指定k的数据
clearData(k)：删除指定k的数据

也可以通过event.dataTransfer.setDragImage(图片对象(不是路径),x,y)，用于在拖放操作过程中，修改鼠标指针所指向的图像

1663471217813

<!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 pink;
    }

    .child {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      color: pink;
      float: left;
      margin: 10px 0 0 10px;
    }
  </style>
</head>

<body>
  <div class="parent"></div>
  <!-- 设置当前元素可拖拽 draggable="true"  链接和图片默认是可拖拽的-->
  <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>
  <script>
    //放置元素：parent 放置事件
    var parent = document.querySelector('.parent')
    //拖拽元素：child 拖拽事件
    var children = document.getElementsByClassName('child')
    children = Array.from(children)
    children.forEach(function (item) {
      item.ondragstart = function (event) {
        console.log('ondragstart开始拖动')
        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 (event) {
      console.log("ondragover正在放置元素内移动")
      //阻止默认行为 因为浏览器对拖拽事件是禁止拖拽,否则ondrop就不会触发
      event.preventDefault()
    }
    //将拖拽元素放到放置元素
    parent.ondrop = function () {
      console.log("ondrop放置")
      var id = event.dataTransfer.getData('id')
      this.appendChild(document.querySelector(`#${id}`))
      //阻止事件冒泡
      event.stopPropagation();
    }

    document.body.ondragover = function (event) {
      console.log("ondragover正在放置元素内移动")
      //阻止默认行为
      event.preventDefault()
    }

    document.body.ondrop = function () {
      console.log("ondrop放置")
      var id = event.dataTransfer.getData('id')
      this.appendChild(document.querySelector(`#${id}`))
      event.stopPropagation();
    }
  </script>
</body>

</html>

通信

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

通过window.open()/通过内联框架

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>
</head>

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

  <script>
    var btn1 = document.getElementsByTagName('button')[0]
    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', 'http://127.0.0.1:5500')
    }
    //获取内联框架窗口
    btn3.onclick = function () {
      win = document.querySelector('iframe').contentWindow
    }
  </script>
</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: pink;
    }
  </style>
</head>

<body>
  B1页面
  <script>
    window.onmessage = function (event) {
      //接收数据
      console.log(event.data)
      //数据来源
      console.log(event.origin)
    }
  </script>
</body>

</html>

websocket

webSocket是一种网络通信协议，是H5新推出的一种在单个TCP连接上进行全双工通讯的协议；

为什么有了http还需要推出websocket？

因为HTTP协议只能由客户端发起；服务器端不会主动向客户端传送数据；
而现阶段随着需求越来越多，一些Web应用需要即时通信、实时数据、以及订阅推送等功能的，如果使用HTTP发送请求那么就需要使用轮询（每隔一段时间就给服务器发送一次请求），会给服务器带来较大的压力；
而websocket的推出，就很好的解决了这一问题，因为它是全双工的，服务器端也能够主动给客户端发起通信；

websocket的优势

极大节省了网络带宽资源的消耗；
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接，这个连接是实时的也是永久的，除非被显示关闭。服务器可以随时将消息推送到客户端。

使用步骤：

<!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>
</head>

<body>
  <script>
  //连接后端接口
    var ws = new WebSocket('ws://121.199.0.35:8888/imserver/25')
    
    ws.onopen = function () {
      console.log('websocket与服务器连接成功')
      ws.send('发送给服务器的数据')
    }
    // 接受推送消息事件监听
    ws.onmessage = function (event) {
    // event.data就是推送的数据
      console.log(event.data)
    }
    
    ws.close = function () {
      console.log('websocket和服务器连接关闭')
    }
    
    setTimeout(() => {
      ws.close()
    }, 5000);
  </script>
</body>

</html>

geolocation

H5中添加了获取地理位置的api, window.navigator.geolocation.getCurrentPosition。它也是百度地图/高德地图通过浏览器定位的实现原理。

window.navigator.geolocation.getCurrentPosition(position=>{
    console.log(position);
})