数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学HTML5中最重要的API是什么？
API 也被称为“应用程序编程接口”。它是一组定义、工具和协议的集合，使各种软件程序之间能够交互和通信。开发人员可以与服务、库或平台进行交互，而无需了解其所有操作技术，因为 API 定义了他们可以使用的 方法和数据结构。
API 对于软件开发至关重要，因为它们允许程序员使用其他软件组件提供的功能和服务来创建更复杂的应用程序。它们促进了各种软件系统之间的模块化和协作。让我们深入了解本文，学习更多关于 HTML5 中 API 的知识。
HTML 拖放 API
拖放 (DnD) 是一种强大的用户界面概念，它使用鼠标点击简化了项目的复制、重新排序和删除。这允许用户点击并按住鼠标按钮，将其悬停在元素上，将其拖动到另一个位置，然后释放鼠标按钮以将元素放置在那里。
示例
在下面的示例中，我们运行脚本以创建拖放。
<!DOCTYPE HTML>
<html>
<head>
<style>
#tutorial {
width: 200px;
height: 69px;
padding: 9px;
border: 2px solid #DE3163;
}
body {
font-family: verdana;
background-color: #D5F5E3;
color: #DE3163;
}
</style>
</head>
<body>
<h2>Drag and Drop the image in the box</h2>
<img id="drag1" src="https://tutorialspoint.com/cg/images/logo.png" draggable="true" ondragstart="tutorial2(event)" width="200" height="70">
<br>
<br>
<br>
<div id="tutorial" ondrop="tutorial3(event)" ondragover="tutorial1(event)"></div>
<script>
function tutorial1(x) {
x.preventDefault();
}
function tutorial2(x) {
x.dataTransfer.setData("tp", x.target.id);
}
function tutorial3(x) {
x.preventDefault();
var result = x.dataTransfer.getData("tp");
x.target.appendChild(document.getElementById(result));
}
</script>
</body>
</html>
当我们执行上述脚本时，它将生成一个包含图像和 div 框以及网页上文本的输出。当用户开始拖动图像时，将触发拖动事件；当他将图像放在框中时，将触发放置事件。
HTML Web Storage API
Web 应用程序可以使用 Web 存储在用户的浏览器中本地存储数据。在 HTML5 之前，应用程序数据必须保存在 cookie 中，并随每个服务器请求一起发送。使用 Web 存储，可以安全地将大量数据本地存储，而不会降低网站的功能。
与 cookie 相比，没有信息传输到服务器，并且存储容量更大（至少 5MB）。Web 存储是按来源（按域和协议）进行的。来自一个来源的所有页面都可以存储和访问相同的数据。HTML Web 存储提供两个对象用于在客户端存储数据。
Window.localStorage − 存储的数据没有过期时间。
Window.sessionStorage − 数据将存储在特定会话期间。
示例
以下是一个示例，我们将使用 localStorage 在 Web 上存储数据，且数据永不过期。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = "Welcome To Tutorialspoint" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
运行上述代码后，输出窗口将弹出，在网页上显示输入字段和点击按钮。当用户在输入字段中输入文本并点击按钮时，文本将存储在 localStorage 中。
HTML Geolocation API
Geolocation 是 HTML5 中最强大的 API 之一，用于确定 Web 应用程序中用户的地理位置。使用 HTML5，您现在可以浏览到访问者当前网站的纬度和经度坐标。这些坐标可以被 JavaScript 记录并传输到服务器，允许网站显示您的当前位置。
大多数地理位置服务使用内部 GPS 设备、网络路由地址（如 IP 地址）、RFID、WIFI 和 MAC 地址，或这些地址的组合来确定用户的位置。
语法
以下是 HTML Geolocation 的语法
var loc = navigator.geolocation
示例
让我们看看下面的示例，我们将获取用户的当前位置。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
font-family: verdana;
background-color: #E8DAEF;
color: #DE3163;
}
</style>
</head>
<body>
<div id="tutorial">
<h2>TUTORIALSPOINT</h2>
<button type="button" onclick="mytutorial()"> Click to get Location </button>
</div>
<script>
var x = document.getElementById("tutorial");
var y = navigator.geolocation;
function mytutorial() {
if (y) y.getCurrentPosition(mytutorial1);
else x.innerHTML = "does " + "not support the Geolocation API.";
}
function mytutorial1(a) {
x.innerHTML = "Latitude: " + a.coords.latitude + " < br > Longitude: " +
a.coords.longitude;
}
</script>
</body>
</html>
当我们执行上述代码时，它将生成一个包含文本和网页上点击按钮的输出。当用户点击按钮时，它将请求获取其位置的权限。获得权限后，它将在网页上显示其当前位置。
浏览量：244
