【温故而知新】HTML5存储localStorage/sessionStorage

文章目录

一、概念
二、存储localStorage
三、存储sessionStorage
四、区别及优缺点
- 1. 区别：
- 2. 优缺点：

一、概念

HTML5是HTML的最新版本，它引入了许多新的元素和功能，以适应现代网页开发的需求。以下是HTML5的一些主要特点：

新增语义元素：HTML5引入了许多新的语义元素，如<header>、<footer>、<article>、<section>等，这些元素有助于提高网页的结构化和可访问性。
媒体支持：HTML5引入了<audio>和<video>元素，使得开发者可以在网页上直接嵌入音频和视频内容，而不需要依赖第三方插件。
Canvas绘图：HTML5引入了<canvas>元素，使得开发者可以使用JavaScript在网页上绘制图形和动画。
语义化标签：HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如，使用<nav>元素表示导航链接，使用<article>元素表示独立的内容等。
交互性：HTML5提供了更多的API和事件处理程序，使得开发者可以创建更加交互式的网页和应用。例如，拖放功能、文件上传和下载、地理定位等。
离线和存储：HTML5提供了离线存储和会话存储功能，使得开发者可以在用户的设备上存储数据，以便在离线时使用。
更好的表单控制：HTML5改进了表单元素和输入类型，使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具，它为开发者提供了更多的功能和灵活性，使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

二、存储localStorage

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

sessionStorage是HTML5中提供的一种在浏览器会话期间存储数据的方式。与localStorage不同，sessionStorage存储的数据仅在当前会话期间有效，即当用户关闭浏览器窗口或标签页时，sessionStorage中的数据会被清除。

在使用sessionStorage存储数据时，您可以使用以下方法：

setItem(key, value): 将键值对存储到sessionStorage中。其中key是要存储的数据的键，value是要存储的数据的值。

sessionStorage.setItem("name", "John");

getItem(key): 检索sessionStorage中存储的值。其中key是要检索的数据的键。

var name = sessionStorage.getItem("name");

removeItem(key): 从sessionStorage中删除指定键的数据。

sessionStorage.removeItem("name");

clear(): 清除sessionStorage中的所有数据。

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中提供的两种在浏览器端存储数据的方式。它们的区别和优缺点如下：

1. 区别：

数据的生存周期：localStorage中存储的数据在浏览器关闭后仍然有效，而sessionStorage中存储的数据仅在当前会话期间有效，即当用户关闭浏览器窗口或标签页时，sessionStorage中的数据会被清除。
数据的共享性：localStorage中存储的数据是在同一域名下的多个窗口和标签页之间共享的，而sessionStorage中存储的数据仅在同一个窗口或标签页中共享。
存储容量：localStorage和sessionStorage的存储容量通常为5MB，但实际容量可能因浏览器和操作系统的限制而有所不同。