文章目录

Web存储
- cookie
- WebStorage
- - sessionStorage
  - localStorage
拖拽
- 拖拽元素
- 放置元素
通信
- 通过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 winbtn1.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);
})

H5API ---（Web存储-拖拽事件-通信-websocket-geolocation）相关推荐

Android--Launcher拖拽事件详解【androidICS4.0--Launcher系列二】
AndroidICS4.0版本的launcher拖拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一直 ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
中如何使用echart_jQueryEasyUI中的拖拽事件如何使用
jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽.可设置拖动元素相对于x.y轴拖动,可设置拖拽何时停止等效果 jQuery中的easyui是一个非常好用的插件,它虽然使用简单方便,但是 ...
UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间当我们需要使用 UGUI 中的 ...
JavaFX鼠标拖拽事件
一.节点原拖拽事件 //鼠标拖拽进入node node.setOnMouseDragEntered(event->{//do something });//鼠标拖拽退出node node.set ...
[html] HTML5拖拽事件的顺序是什么？
[html] HTML5拖拽事件的顺序是什么? ondragstart :源对象开始被拖动 ondrag:源对象被拖动过程中 ondragend:源对象被拖动结束ondragenter:源对象拖动着进 ...
标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端移动端在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...

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