九八云安全技术要点
HTML5本地存储类型对比
| 存储类型 | 作用域 | 生命周期 | 容量限制 |
|---|---|---|---|
localStorage |
同源（协议+域名+端口） | 永久保存，除非手动清除 | 约5MB |
sessionStorage |
同源（协议+域名+端口） | 页面会话结束（标签页关闭） | 约5MB |
核心API方法
| 方法名 | 功能描述 | 示例 |
|---|---|---|
setItem() |
存储键值对（字符串） | localStorage.setItem('key', 'value') |
getItem() |
获取键对应的值 | localStorage.getItem('key') |
removeItem() |
删除指定键值对 | localStorage.removeItem('key') |
clear() |
清空所有存储数据 | localStorage.clear() |
key() |
获取索引对应的键名 | localStorage.key(0) |
length |
获取存储数据的数量 | localStorage.length |
实现步骤
-
创建基础界面
// 获取输入内容并存储
const saveBtn = document.getElementById('save');
saveBtn.addEventListener('click', () => {
const content = document.getElementById('noteInput').value;
localStorage.setItem('note', content);
displayNote(); // 更新显示
}); -
读取并展示数据
function displayNote() {
const note = localStorage.getItem('note') || '暂无内容';
document.getElementById('noteDisplay').innerText = note;
} -
删除单条数据
const deleteBtn = document.getElementById('delete'); deleteBtn.addEventListener('click', () => { localStorage.removeItem('note'); displayNote(); }); -
清空所有数据
const clearBtn = document.getElementById('clear');
clearBtn.addEventListener('click', () => {
localStorage.clear();
displayNote();
});
代码示例（完整版）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">本地存储记事本</title>
</head>
<body>
<h2>HTML5本地存储记事本</h2>
<textarea id="noteInput" placeholder="输入内容..."></textarea><br>
<button id="save">保存</button>
<button id="delete">删除</button>
<button id="clear">清空</button>
<div id="noteDisplay">暂无内容</div>
<script>
// 初始化显示
displayNote();
// 保存数据
document.getElementById('save').addEventListener('click', () => {
const content = document.getElementById('noteInput').value;
localStorage.setItem('note', content);
displayNote();
});
// 删除单条数据
document.getElementById('delete').addEventListener('click', () => {
localStorage.removeItem('note');
displayNote();
});
// 清空所有数据
document.getElementById('clear').addEventListener('click', () => {
localStorage.clear();
displayNote();
});
function displayNote() {
const note = localStorage.getItem('note') || '暂无内容';
document.getElementById('noteDisplay').innerText = note;
}
</script>
</body>
</html>
常见问题与解答
问题1：为什么选择localStorage而不是sessionStorage？
- 解答：
localStorage数据持久化，即使关闭浏览器或重启电脑后仍可保留；而sessionStorage仅在页面会话期间有效（如关闭标签页后数据消失），记事本需要长期保存数据，因此选择localStorage。
问题2：如何判断localStorage是否支持当前浏览器？
- 解答：
可通过检测window.localStorage是否为undefined来判断。if (typeof window.localStorage !== 'undefined') { // 支持localStorage } else { alert('当前浏览器不支持localStorage'); }现代浏览器（如Chrome、Firefox、Edge）均支持，但某些隐私模式或旧版浏览器可能
