• 猿创征文 | H5 API之web存储、拖拽事件以及跨文档通信

    目录

    一、web存储

    1、cookie

    cookie的特点

    set(key, value, attributes)方法

    get(key)方法

    remove(key, attributes)方法

    2、会话存储sessionStorage

    sessionStorage的特点

    setItem(key, value)方法

    getItem(key)方法

    removeItem(key)方法

    clear()方法 

     3、本地存储localStorage

    localStorage的特点

    localStorage与sessionStorage区别

    二、拖拽事件

    三、跨文档通信 

    1、使用location对象实现跨文档通信

    2、使用H5提供的方法实现跨文档通信 

    通过window.open()方法打开B页面

    通过内联框架

    一、web存储

    web存储分为cookie和WebStorage，WebStorage又分为sessionStorage和localStorage。

    1、cookie

    cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie。

    cookie的特点：

    1、cookie产生于服务器端，保存在客户端

    2、同一服务器的cookie是共享的，不同服务器的cookie不共享

    3、数据传输大小限制4kb

    我们需要操作cookie，首先要先引入js-cookie库，js-cookie库我们可以到BootCDN上找。

    我们可以打印cookie看一下cookie是什么： 

      

    可以看出Cookies 是一个对象，里面有很多方法，但我们只需要重点关注其原型上的三个方法：get()、remove()、set()

    set(key, value, attributes)方法

    用来设置cookie，它有三个参数：

    key：键名

    value：键值

    attributes：设置cookie的属性

    cookie的属性有：

    expires：设置cookie过期时间

    path：表示cookie可见路径

    domain：用来指定cookie所在的域名

    secure：表示cookie传输是否需要安全协议（HTTPS），取值为true和false，不需要我们指定值，如果通信是HTTPS协议，该开关自动打开

    max-age：用来指定cookie有效期，优先级高于expires

    HttpOnly：用来设置cookie不能被JavaScript读取

    get(key)方法

    用来获取cookie

    remove(key, attributes)方法

    用来移除cookie

    在浏览器中打开F12，在存储中可以查看cookie 

    2、会话存储sessionStorage

    sessionStorage的特点：

    1、会话存储sessionStorage针对于浏览器选项卡存储，只要选项卡关闭或者是浏览器关闭，会话就会失效

    2、传输数据可以达到5MB，甚至更大

    打印一下sessionStorage：

    console.log(sessionStorage);

    setItem(key, value)方法

    设置会话存储

    getItem(key)方法

    获取会话存储

    removeItem(key)方法

    清除key对应的会话存储

    clear()方法 

    清除所有的会话存储

     3、本地存储localStorage

    localStorage的特点：

    1、将数据存到本地磁盘中，即使选项卡关闭或者浏览器关闭数据依旧存在，除非手动删除 否则数据一直存在本地磁盘中

    2、传输数据可以达到5MB甚至更大

    打印一下localStorage：

    console.log(localStorage);

     localStorage拥有和sessionStorage一样的方法：


    localStorage与sessionStorage区别：

    1、不同浏览器无法共享localStorage和sessionStorage

    2、相同浏览器且同一域名和端口号下的不同页面可以共享localStorage

    3、相同浏览器的不同页面不能共享sessionStorage

    二、拖拽事件

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

    拖放元素：设置当前元素可拖放 draggable='true'
    放置元素：默认是不可以放置的，我们需要取消默认行为 event.preventDefault() 

    拖动事件：dragstart(开始拖放)、drag(正在拖放)、dragend(拖放结束)
    放置事件：dragenter(进入放置元素)、dragover(在放置元素内移动)、drop(放置到放置元素中)


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

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

    方法：

    传输数据：event.dataTransfer.setData(key, value)  dragstart中使用

    获取数据：event.dataTransfer.getData(key)            drop中使用

    清除数据：event.dataTransfer.clearData(key)         如果不传参，则删除所有

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 	<title>Documenttitle>
    9. 	<style>
    10. 		.parent {
    11. 			height: 200px;
    12. 			border: 2px solid black;
    13. 		}
    14.  
    15. 		.child {
    16. 			width: 100px;
    17. 			height: 100px;
    18. 			background-color: pink;
    19. 			color: white;
    20. 			float: left;
    21. 			margin: 10px 0 0 10px;
    22. 			text-align: center;
    23. 			line-height: 100px;
    24. 		}
    25.  
    26. 		body {
    27. 			height: 400px;
    28. 		}
    29. 	style>
    30. 	<script>
    31. 		window.onload = function () {
    32. 			// 获取parent和child
    33. 			var parent = document.querySelector('.parent');
    34. 			var childs = document.querySelectorAll('.child');
    35. 			// 将类数组对象childs转成数组
    36. 			childs = Array.from(childs);
    37.  
    38. 			//给每一个拖动元素绑定拖拽事件
    39. 			childs.forEach(function (item) {
    40. 				// 开始拖动
    41. 				item.ondragstart = function (event) {
    42. 					console.log('ondragstart开始拖动了');
    43. 					// console.log(event);
    44. 					// 将拖动元素的id传出去
    45. 					// dataTransfer.setData 传输数据
    46. 					event.dataTransfer.setData('id', item.id);
    47. 				}
    48. 				// 正在拖动
    49. 				item.ondrag = function () {
    50. 					console.log('ondrap正在拖动');
    51. 				}
    52. 				// 拖动结束
    53. 				item.ondragend = function () {
    54. 					console.log('ondragend拖动结束');
    55. 				}
    56. 			})
    57.  
    58. 			// 给放置元素绑定放置事件
    59. 			// 进入到放置元素
    60. 			parent.ondragenter = function () {
    61. 				console.log('ondragenter进入到放置元素');
    62. 			}
    63. 			// 在放置元素内移动
    64. 			parent.ondragover = function () {
    65. 				console.log('ondragover正在放置元素内移动');
    66. 				// 将放置元素设置为可放置
    67. 				event.preventDefault();
    68. 			}
    69. 			// 将拖动元素放置到放置元素
    70. 			parent.ondrop = function (event) {
    71. 				console.log('ondrop放置');
    72. 				//获取拖动元素传输的数据getData(key)
    73. 				// console.log(event.dataTransfer.getData('id');
    74. 				var id = event.dataTransfer.getData('id');
    75. 				this.appendChild(document.querySelector('#' + id))
    76. 				// 阻止事件冒泡,否则拖拽的时候会冒泡到body,就无法将拖拽元素放到放置元素parent里面
    77. 				event.stopPropagation()
    78. 			}
    79.  
    80. 			// 将拖动元素放置到body
    81. 			document.body.ondragover = function () {
    82. 				console.log('ondragover正在放置元素内移动');
    83. 				// 将放置元素设置为可放置
    84. 				event.preventDefault();
    85. 			}
    86. 			// 将拖动元素放置到放置元素
    87. 			document.body.ondrop = function (event) {
    88. 				console.log('ondrop放置');
    89. 				//获取拖动元素传输得数据getData(key)
    90. 				// console.log(event.dataTransfer.getData('id'));
    91. 				var id = event.dataTransfer.getData('id');
    92. 				this.appendChild(document.querySelector('#' + id))
    93. 			}
    94. 		}
    95. 	script>
    96. head>
    97.  
    98. <body>
    99. 	
    100. 	
    101. 	<div class="parent">div>
    102. 	
    103. 	<div class="child" id="one" draggable="true">onediv>
    104. 	<div class="child" id="two" draggable="true">twodiv>
    105. 	<div class="child" id="three" draggable="true">threediv>
    106. 	<div class="child" id="four" draggable="true">fourdiv>
    107. body>
    108.  
    109. html>

    三、跨文档通信 

    1、使用location对象实现跨文档通信

    location对象是BOM对象，提供了与当前窗口中加载的文档有关的信息。而location.search 返回URL的查询字符串。

    因此我们可以在A页面地址栏拼接参数，然后在B页面通过location.search获取到A页面传递过来的数据，但是我们通过location.search得到查询字符串后，要怎么转成对象呢？

    第一种方法：可以通过qs序列化工具，使用Qs.parse() 可以将查询字符串转换成js对象

    第二种方法：

    1. // slice(1)去掉？ split('&')转成数组
    2. var str = location.search.slice(1).split('&').map(function(item){
    3.   return item.split('=')
    4. }) //此时str变成了一个二维数组[[name,yezi],[age,18]]
    5. var obj = {}
    6. str.forEach(function(item){
    7.   // console.log(item);
    8.   obj[item[0]] = item[1]
    9. })
    10. console.log(obj);

    例子展示：

    A页面.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8. head>
    9. <body>
    10.   
    11.   <a href="./B页面.html?name=yezi&age=18">跳转到B页面a>
    12. body>
    13. html>

    B页面.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   
    9.   <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js">script>
    10.   <script>
    11.     // console.log(location);
    12.     // console.log(location.search); //?name=yezi&age=18
    13.     
    14.     //第一种方法，使用qs工具
    15.     //Qs.parse() 把查询字符串转换成js对象
    16.     //console.log(Qs.parse(str));
    17.  
    18.     // 第二种方法
    19.     // slice(1)去掉？ split('&')转成数组
    20.     var str = location.search.slice(1).split('&').map(function(item){
    21.       return item.split('=')
    22.     }) //此时str变成了一个二维数组[[name,yezi],[age,18]]
    23.     var obj = {}
    24.     str.forEach(function(item){
    25.       // console.log(item);
    26.       obj[item[0]] = item[1]
    27.     })
    28.     console.log(obj);
    29.   script>
    30. head>
    31. <body>
    32.   我是B页面
    33. body>
    34. html>

    2、使用H5提供的方法实现跨文档通信 

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

    通过window.open()方法打开B页面

    A页面.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <script>
    9.     window.onload = function(){
    10.       var btn1 = document.querySelector('button')
    11.       var btn2 = document.getElementsByTagName('button')[1]
    12.       var win
    13.       btn1.onclick = function(){
    14.         //打开B页面
    15.         win = window.open('./B页面.html')
    16.       }
    17.       btn2.onclick = function(){
    18.         //发送消息给B页面
    19.         // win.postMessage('hello','http://127.0.0.1:5500')
    20.         // * 表示往任何服务器发送
    21.         win.postMessage('hello','*')
    22.       }
    23.     }
    24.   script>
    25. head>
    26. <body>
    27.   <button>打开B1页面button>
    28.   <button>发送数据button>
    29. body>
    30. html>

    B页面.html

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 	<title>Documenttitle>
    8. 	<style>
    9. 		body{
    10. 			height: 400px;
    11. 			background-color: pink;
    12. 		}
    13. 	style>
    14. 	<script>
    15. 		window.onmessage=function(e){
    16.       // 接收到的数据
    17. 			console.log(e.data);
    18.       // 数据的来源
    19. 			console.log(e.origin);
    20. 		}
    21. 	script>
    22. head>
    23. <body>
    24. 	我是B页面
    25. body>
    26. html>

    注意：要使用本地服务器打开

    先打开B页面，再回到A页面点击发送数据，此时B页面就能收到A传输过来的数据了。 

    通过内联框架

    A页面.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <script>
    9.     window.onload = function(){
    10.       var btn1=document.getElementsByTagName('button')[0];
    11. 			var btn2=document.getElementsByTagName('button')[1];
    12.       var win
    13.       btn1.onclick = function(){
    14.         //获取内联B窗口
    15.         win = document.querySelector('iframe').contentWindow
    16.       }
    17.       btn2.onclick = function(){
    18.         // win.postMessage('hello','http://127.0.0.1:5500')
    19.         // * 往任何服务器发送
    20.         win.postMessage('hello','*')
    21.       }
    22.     }
    23.   script>
    24. head>
    25. <body>
    26.   <button>获取内联B窗口button>
    27.   <button>发送数据button>
    28.   <iframe src="./B页面.html" frameborder="0">iframe>
    29. body>
    30. html>

     B页面.html和前面的一样。

  • 相关阅读:
    leetcode解题思路分析（一百三十一）1103 - 1109 题
    hive中遇到length函数不支持bigint
    Django初窥门径-自定义附件存储模型
    低代码平台选型，你一定要知道以下5点
    元数据管理Apache Atlas编译集成部署及测试
    模拟实现【哈希】
    FFmpeg —— 点播流程技术总结（公网、局域网）
    学习笔记20--汽车运动控制
    设计模式之适配器模式
    No boot device found快速解决方案
  • 原文地址：https://blog.csdn.net/lq313131/article/details/126625339