html localstorage

作者：木齵乄语发布日期:2025-12-20 浏览:137

<!DOCTYPE html>
<html>
<head>
    <title>HTML LocalStorage Example</title>
</head>
<body>

<h2>HTML LocalStorage Example</h2>

<p id="result"></p>

<script>
// 检查浏览器是否支持 localStorage
if (typeof(Storage) !== "undefined") {
    // 存储数据
    localStorage.setItem("username", "JohnDoe");

    // 获取数据
    document.getElementById("result").innerHTML = "Stored username: " + localStorage.getItem("username");

    // 删除单个数据
    // localStorage.removeItem("username");

    // 清空所有数据
    // localStorage.clear();
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

解释说明：

检查浏览器支持：首先，代码检查浏览器是否支持 localStorage。如果支持，则继续执行存储和读取操作；如果不支持，则显示一条提示信息。
存储数据：使用 localStorage.setItem(key, value) 方法将键值对（如 "username" 和 "JohnDoe"）存储在浏览器的本地存储中。
获取数据：使用 localStorage.getItem(key) 方法从本地存储中读取指定键的值，并将其显示在页面上。
删除数据：可以通过 localStorage.removeItem(key) 删除特定的键值对，或通过 localStorage.clear() 清空所有存储的数据。

希望这个示例能帮助你理解如何使用 HTML5 的 localStorage 功能。

上一篇：html2canvas使用

下一篇：html时间代码