HTML5 提供了两种本地存储机制：localStorage 和 sessionStorage。它们允许在客户端存储数据，而无需依赖服务器。以下是它们的使用方法和区别：
1. localStorage
- 特点：
- 数据永久存储，除非手动删除。
- 数据在同一域名下的所有页面和浏览器会话中共享。
- 适用场景：
- 存储用户偏好设置、长期缓存数据等。
使用方法：
- 存储数据：
localStorage.setItem('key', 'value'); - 读取数据：
const value = localStorage.getItem('key'); console.log(value); // 输出: value - 删除数据：
localStorage.removeItem('key'); - 清空所有数据：
localStorage.clear();
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage 示例</title>
</head>
<body>
<input type="text" id="input" placeholder="输入内容">
<button id="save">保存</button>
<button id="load">加载</button>
<button id="clear">清除</button>
<p id="output"></p>
<script>
const input = document.getElementById('input');
const saveButton = document.getElementById('save');
const loadButton = document.getElementById('load');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
// 保存数据
saveButton.addEventListener('click', () => {
localStorage.setItem('userInput', input.value);
output.textContent = '数据已保存！';
});
// 加载数据
loadButton.addEventListener('click', () => {
const value = localStorage.getItem('userInput');
output.textContent = value ? `加载的数据：${value}` : '没有找到数据！';
});
// 清除数据
clearButton.addEventListener('click', () => {
localStorage.removeItem('userInput');
output.textContent = '数据已清除！';
});
</script>
</body>
</html>
2. sessionStorage
- 特点：
- 数据仅在当前浏览器会话中有效，关闭浏览器后数据会被清除。
- 数据在同一域名下的同一页面中共享。
- 适用场景：
- 存储临时数据，如表单数据、会话状态等。
使用方法：
- 存储数据：
sessionStorage.setItem('key', 'value'); - 读取数据：
const value = sessionStorage.getItem('key'); console.log(value); // 输出: value - 删除数据：
sessionStorage.removeItem('key'); - 清空所有数据：
sessionStorage.clear();
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sessionStorage 示例</title>
</head>
<body>
<input type="text" id="input" placeholder="输入内容">
<button id="save">保存</button>
<button id="load">加载</button>
<button id="clear">清除</button>
<p id="output"></p>
<script>
const input = document.getElementById('input');
const saveButton = document.getElementById('save');
const loadButton = document.getElementById('load');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
// 保存数据
saveButton.addEventListener('click', () => {
sessionStorage.setItem('userInput', input.value);
output.textContent = '数据已保存！';
});
// 加载数据
loadButton.addEventListener('click', () => {
const value = sessionStorage.getItem('userInput');
output.textContent = value ? `加载的数据：${value}` : '没有找到数据！';
});
// 清除数据
clearButton.addEventListener('click', () => {
sessionStorage.removeItem('userInput');
output.textContent = '数据已清除！';
});
</script>
</body>
</html>
3. localStorage 和 sessionStorage 的区别
| 特性 | localStorage |
sessionStorage |
|---|---|---|
| 数据有效期 | 永久存储，除非手动删除 | 仅在当前会话有效，关闭浏览器后清除 |
| 数据共享范围 | 同一域名下的所有页面共享 | 同一域名下的同一页面共享 |
| 适用场景 | 长期存储（如用户偏好设置） | 临时存储（如表单数据） |
4. 注意事项
- 存储容量：
- 大多数浏览器的存储容量限制为 5MB 左右。
- 数据类型：
- 只能存储字符串。如果需要存储对象，可以使用
JSON.stringify()和JSON.parse()进行转换。const user = { name: 'Alice', age: 25 }; localStorage.setItem('user', JSON.stringify(user)); const storedUser = JSON.parse(localStorage.getItem('user'));
- 只能存储字符串。如果需要存储对象，可以使用
- 安全性：
- 不要存储敏感信息（如密码、令牌等），因为数据可以通过浏览器开发者工具轻松访问。
总结
localStorage用于永久存储数据，适合长期保存用户偏好设置等。sessionStorage用于临时存储数据，适合保存会话状态或表单数据。- 两者都提供了简单的 API（
setItem、getItem、removeItem、clear）来操作数据。 - 使用
JSON.stringify()和JSON.parse()可以方便地存储和读取对象数据。
通过合理使用 localStorage 和 sessionStorage，可以显著提升 Web 应用的性能和用户体验。
学在每日，进无止境！更多精彩内容请关注微信公众号。
原文出处：
内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。
出处地址：http://www.07sucai.com/tech/808.html
版权声明：本文来源地址若非本站均为转载，若侵害到您的权利，请及时联系我们，我们会在第一时间进行处理。
