HTML5 Web 存储主要分为两种：localStorage 和 sessionStorage。这两种存储机制允许 web 应用在用户的浏览器中存储数据，从而提升用户体验。下面是对这两种存储类型的详细介绍：
1. localStorage
- 定义:
localStorage提供了一种持久存储机制，数据存储在用户的浏览器中，没有过期时间，直到用户手动清除或者通过代码删除。 - 容量: 通常每个域名可以存储大约 5-10 MB 的数据（不同浏览器之间可能会有所不同）。
- 用法:
- 存储数据:
localStorage.setItem('key', 'value'); - 获取数据:
let value = localStorage.getItem('key'); - 删除数据:
localStorage.removeItem('key'); - 清空所有数据:
localStorage.clear();
- 存储数据:
2. sessionStorage
- 定义:
sessionStorage也提供了一种键值对的存储机制，但是其数据在浏览器会话存活期间有效。一旦用户关闭网页或浏览器，数据将被清除。 - 容量: 行为与
localStorage类似，通常也是 5-10 MB 的容量限制。 - 用法:
- 存储数据:
sessionStorage.setItem('key', 'value'); - 获取数据:
let value = sessionStorage.getItem('key'); - 删除数据:
sessionStorage.removeItem('key'); - 清空所有数据:
sessionStorage.clear();
- 存储数据:
3. 数据存储的特点
- 键值对存储: 两者都以键值对的形式存储数据，键是字符串，值可以是字符串（使用
JSON.stringify和JSON.parse来存储和读取对象）。 - 不同源同源策略: 数据存储是基于源（协议 + 域名 + 端口）的，意味着同源的不同网页可以访问相同的存储，而不同源的网页不能访问。
4. 适用场景
localStorage:
- 存储用户偏好设置。
- 保持用户登录状态（在用户选择“记住我”时）。
- 离线应用的数据缓存。
sessionStorage:
- 存储临时数据，像会话中的表单输入。
- 处理多标签页的会话数据（每个标签页访问自己的
sessionStorage）。
5. 数据安全性
- Web 存储是由浏览器提供的，并不适合存储敏感数据，如密码等。同时，数据存储在用户的本地浏览器中，用户可以手动检查和删除数据。
6. 实际示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 存储示例</title>
</head>
<body>
<h1>Web 存储示例</h1>
<input type="text" id="myInput" placeholder="输入一些内容...">
<button id="saveBtn">保存到 localStorage</button>
<button id="clearBtn">清空 localStorage</button>
<script>
document.getElementById('saveBtn').onclick = function() {
const inputValue = document.getElementById('myInput').value;
localStorage.setItem('myData', inputValue);
alert('已保存到 localStorage！');
};
document.getElementById('clearBtn').onclick = function() {
localStorage.clear();
alert('已清空 localStorage！');
};
</script>
</body>
</html>
