2024-08-08发表2024-08-10更新软件开发 / HTML5 分钟读完 (大约684个字)0次访问

22 本地存储

在现代网页开发中，本地存储（Local Storage）是一个非常重要的概念，它允许你在用户的浏览器中存储数据。相比于 Cookie，本地存储 提供了更大的存储容量，且不随每个请求发送到服务器。

本地存储的基本概念

本地存储 是一种Web存储机制，允许你以键值对的形式在用户的浏览器中保存数据。它主要有以下两个接口：

localStorage：用于在用户的浏览器中持久性地保存数据，即使关闭浏览器，数据仍然存在。
sessionStorage：用于在会话中保存数据，当用户关闭浏览器窗口时数据丢失。

使用 `localStorage`

保存数据

要将数据存储在 localStorage 中，可以使用 setItem 方法。它接受两个参数：键和对应的值。

1 2	localStorage.setItem('username', 'JohnDoe'); localStorage.setItem('age', '30');

读取数据

使用 getItem 方法可以从 localStorage 中读取数据：

const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

const age = localStorage.getItem('age');
console.log(age); // 输出: 30

删除数据

使用 removeItem 方法可以从 localStorage 中删除指定的项：

1	localStorage.removeItem('age');

清空所有数据

如果您想清空 localStorage 中的所有数据，可以使用 clear 方法：

1	localStorage.clear();

案例：用户设置保存

我们可以做一个简单的示例，利用 localStorage 来保存和读取用户的设置，例如用户名和主题偏好。

HTML 结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage 示例</title>
</head>
<body>
    <h1>欢迎！</h1>
    <label for="username">用户名:</label>
    <input type="text" id="username" placeholder="请输入用户名">
    <button id="save">保存设置</button>
    <button id="load">加载设置</button>
    <div id="output"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript 实现

document.getElementById('save').addEventListener('click', function() {
    const username = document.getElementById('username').value;
    localStorage.setItem('username', username);
    alert('设置已保存！');
});

document.getElementById('load').addEventListener('click', function() {
    const savedUsername = localStorage.getItem('username');
    if (savedUsername) {
        document.getElementById('output').innerText = `已保存的用户名: ${savedUsername}`;
    } else {
        document.getElementById('output').innerText = '没有保存的用户名。';
    }
});

代码解释

当用户输入用户名并点击“保存设置”按钮时，用户名会被存储在 localStorage。
点击“加载设置”按钮时，页面会从 localStorage 读取用户名并显示。

注意事项

localStorage 中存储的数据是以字符串形式保存的，因此如果你要存储对象，需要先进行 JSON 序列化，例如：

1 2	const user = { name: 'John Doe', age: 30 }; localStorage.setItem('user', JSON.stringify(user));

读取时需要进行反序列化：

1	const user = JSON.parse(localStorage.getItem('user'));

总结, localStorage 是一个简单且强大的工具，可以帮助你持久化用户数据及设置，提升用户体验。通过灵活地使用它，你可以更好地管理客户端的状态。

22 本地存储

https://zglg.work/html/22/

作者

AI教程网

发布于

2024-08-08

更新于

2024-08-10

许可协议

#HTML

支付宝

送我杯咖啡微信

22 本地存储

本地存储的基本概念

使用 `localStorage`

保存数据

读取数据

删除数据

清空所有数据

案例：用户设置保存

HTML 结构

JavaScript 实现

代码解释

注意事项

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

链接

分类

最新文章

标签

22 本地存储

本地存储的基本概念

使用 localStorage

保存数据

读取数据

删除数据

清空所有数据

案例：用户设置保存

HTML 结构

JavaScript 实现

代码解释

注意事项

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

链接

分类

最新文章

标签

使用 `localStorage`