在线便签
多标签便签，自动保存到浏览器本地，无需登录，刷新不丢失
字号：
0 字
关于在线便签
- 多标签便签工具，支持最多10个便签同时存在，每个便签独立标题和内容
- 内容自动保存到浏览器 localStorage，关闭页面或刷新后内容不丢失
- 适用于临时记录代码片段、会议笔记、待办事项、草稿等场景
操作说明
- 点击「新建便签」创建新标签，双击标签名可重命名，点击标签右侧 × 删除
- 点击「下载」将当前便签内容保存为 .txt 文件
- 支持 Tab 键缩进（插入4个空格），方便记录代码
- 右上角可调整字体大小（小/中/大），实时显示字数统计
注意事项
- 数据仅保存在当前浏览器的 localStorage 中，换浏览器或清除浏览器数据会丢失内容
- 建议定期点击「下载」导出重要内容备份
- 最多支持10个便签，超出后需删除旧便签才能新建
- 所有处理均在浏览器本地完成，不会上传任何数据
localStorage 知识详解
Web Storage 对比
| 特性 | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| 生命周期 | 永久（手动清除） | 标签页关闭即清除 | 可设置过期时间 |
| 容量 | 约 5MB | 约 5MB | 约 4KB |
| 跨标签页 | ✅ 共享 | ❌ 不共享 | ✅ 共享 |
| 随请求发送 | ❌ 不发送 | ❌ 不发送 | ✅ 自动发送 |
| 适用场景 | 用户偏好、离线数据 | 临时表单数据 | 身份认证 Token |
localStorage API 速查
// 存储数据
localStorage.setItem('key', 'value');
localStorage.setItem('obj', JSON.stringify({ a: 1 }));
// 读取数据
const val = localStorage.getItem('key');
const obj = JSON.parse(localStorage.getItem('obj'));
// 删除数据
localStorage.removeItem('key');
// 清空所有
localStorage.clear();
// 遍历所有键
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}
localStorage 安全注意事项
- 不要存储敏感信息：密码、Token、身份证号等敏感数据不应存储在 localStorage 中，XSS 攻击可读取所有数据
- 同源策略：localStorage 受同源策略保护，不同域名之间无法互相访问
- 容量限制：超出约5MB限制时会抛出 QuotaExceededError，应做好异常处理
- 隐私模式：浏览器隐私/无痕模式下，localStorage 在窗口关闭后会被清除