HTML | DOM 存储 key() 方法(1)

📌 相关文章

📜 HTML | DOM 存储 key() 方法(1)

📅 最后修改于: 2023-12-03 15:15:36.237000 🧑 作者: Mango

HTML | DOM 存储 key() 方法

简介

在 Web 应用程序中，我们经常需要从存储设备（如硬盘驱动器或浏览器内置的存储容器）中存取数据。HTML5 规范引入了 Web Storage API，它是一种在客户端本地存储数据的简单方式。

localStorage 是 Web Storage API 中的一个重要概念。localStorage 允许你存储字符串键值对，可以在浏览器关闭后保留在本地，并且可以在同一域中不同页面间共享。

key() 方法返回存储容器中指定序号的键名。

语法

localStorage.key(index);

参数

index：存储容器中键名的序号。

返回值

key() 方法返回序号为 index 的键名。如果序号大于存储容器中键名的数量，返回 null。

示例代码

<!DOCTYPE html>
<html>
<head>
	<title>localStorage 示例</title>
	<script>
		function showKeys() {
			var keys = '';
			for (var i = 0; i < localStorage.length; i++) {
				var key = localStorage.key(i);
				keys += key + '<br>';
			}
			document.getElementById('keys-container').innerHTML = keys;
		}

		function clearStorage() {
			localStorage.clear();
			showKeys();
		}
	</script>
</head>
<body>

<h2>localStorage 中的键名</h2>

<div id="keys-container"></div>

<button onclick="showKeys()">显示键名</button>
<button onclick="clearStorage()">清空 localStorage</button>

</body>
</html>

这个 HTML 文件包含两个按钮：一个用于显示 localStorage 中的键名，另一个用于清空 localStorage。当用户点击“显示键名”按钮时，JavaScript 代码会遍历 localStorage 中存储的每个键名，并将它们全部显示在 HTML 元素 #keys-container 中。

总结

key() 方法是 localStorage 中用于获取指定序号键名的方法。通过它，我们可以很方便地遍历 localStorage 中的所有键名。需要注意的是，key() 方法返回的是字符串类型的键名，而且序号从 0 开始计数。如果想获取存储容器中所有的键名，可以利用 length 属性和 for 循环来实现。