HTML5是HTML的最新版本，它引入了许多新的元素和功能，以适应现代网页开发的需求。以下是HTML5的一些主要特点：
<header>、<footer>、<article>、<section>等，这些元素有助于提高网页的结构化和可访问性。<audio>和<video>元素，使得开发者可以在网页上直接嵌入音频和视频内容，而不需要依赖第三方插件。<canvas>元素，使得开发者可以使用JavaScript在网页上绘制图形和动画。<nav>元素表示导航链接，使用<article>元素表示独立的内容等。HTML5是一个非常强大的工具，它为开发者提供了更多的功能和灵活性，使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。
HTML5存储是一种用于在客户端存储数据的技术。它提供了几种存储选项，包括Web存储、Web SQL数据库和IndexedDB。这些存储选项可以在用户的浏览器中存储数据，以便在重新加载页面或关闭浏览器后仍然可用。
下面是一个使用HTML5 Web存储的简单案例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Web存储</title>
<script>
// 存储数据
function storeData() {
var name = document.getElementById("name").value;
localStorage.setItem("name", name);
}
// 检索数据
function retrieveData() {
var name = localStorage.getItem("name");
document.getElementById("display").innerHTML = "您的名字是：" + name;
}
</script>
</head>
<body>
<h1>HTML5 Web存储</h1>
<input type="text" id="name" placeholder="请输入您的名字">
<button onclick="storeData()">存储</button>
<br>
<button onclick="retrieveData()">检索</button>
<p id="display"></p>
</body>
</html>
在上面的代码中，我们使用了localStorage对象来存储和检索数据。在storeData函数中，我们获取输入框中的值，并使用localStorage.setItem方法将其存储在名为"name"的键下。在retrieveData函数中，我们使用localStorage.getItem方法检索存储的值，并将其显示在页面上。
这只是一个简单的示例，用于演示HTML5 Web存储的基本用法。您可以根据自己的需求扩展和修改代码。
方法
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage是HTML5中提供的一种在浏览器会话期间存储数据的方式。与localStorage不同，sessionStorage存储的数据仅在当前会话期间有效，即当用户关闭浏览器窗口或标签页时，sessionStorage中的数据会被清除。
在使用sessionStorage存储数据时，您可以使用以下方法：
sessionStorage.setItem("name", "John");
var name = sessionStorage.getItem("name");
sessionStorage.removeItem("name");
sessionStorage.clear();
以下是一个使用sessionStorage的简单示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 sessionStorage存储</title>
<script>
// 存储数据
function storeData() {
var name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
}
// 检索数据
function retrieveData() {
var name = sessionStorage.getItem("name");
document.getElementById("display").innerHTML = "您的名字是：" + name;
}
</script>
</head>
<body>
<h1>HTML5 sessionStorage存储</h1>
<input type="text" id="name" placeholder="请输入您的名字">
<button onclick="storeData()">存储</button>
<br>
<button onclick="retrieveData()">检索</button>
<p id="display"></p>
</body>
</html>
在上述代码中，我们使用sessionStorage对象实现了存储和检索数据的功能。在storeData函数中，我们获取输入框中的值，并使用sessionStorage.setItem方法将其存储在名为"name"的键下。在retrieveData函数中，我们使用sessionStorage.getItem方法检索存储的值，并将其显示在页面上。
注意：与localStorage不同，sessionStorage的存储是基于每个窗口或标签页的。即使同一个网站在多个标签页中打开，每个标签页会有自己独立的sessionStorage，它们之间的数据是隔离的。
localStorage和sessionStorage是HTML5中提供的两种在浏览器端存储数据的方式。它们的区别和优缺点如下：
localStorage的优点：
localStorage的缺点：
sessionStorage的优点：
sessionStorage的缺点：
根据具体业务需求，可以选择使用localStorage或sessionStorage来存储数据。如果需要持久化存储数据或在多个窗口和标签页之间共享数据，可以使用localStorage；如果只需要在当前会话期间临时存储数据或避免不同页面之间相互干扰，可以使用sessionStorage。