localStorage / sessionStorage / Cookie 一页对照
支持切换三种常见浏览器存储方式，直接对比读写行为和适用场景。
可直接写入、读取、删除
输入 key 和 value 后即可本地写入、读取和删除，适合前端调试和教学演示。
所有数据只在本地浏览器里处理
这类存储演示默认只操作当前浏览器环境，不会把 key 或 value 上传服务器。
浏览器本地存储演示
localStorage、sessionStorage 和 Cookie 一页对照
适合前端调试、教学说明和本地存储差异演示。所有读写默认只在当前浏览器本地完成，不会上传服务器。
当前模式
localStorage
当前 key
demo-key
当前值长度
0
当前读取结果
当前 key 暂无存储值。
当前模式说明
关闭标签页后通常仍会保留，适合长期本地缓存。
所有读写都只在当前浏览器本地进行，不会上传服务器。
工具使用说明
怎么用数据存储
选择存储模式
先切到 localStorage、sessionStorage 或 Cookie，明确当前要演示哪一种存储。
输入 key 和 value
填入测试 key 和 value 后，可以直接本地写入、读取和删除。
对比不同存储方式差异
观察不同模式的读取结果和持久化特性，用于调试、联调或教学说明。
功能说明
这个工具解决什么问题
数据存储工具适合哪些场景
适合前端调试、教学演示、浏览器存储差异说明和本地缓存行为验证。
如果你只是想快速说明 localStorage、sessionStorage 和 Cookie 的区别，这类页面会比手写示例更直观。
为什么要把三种存储方式放在一起
很多人知道名字，却不清楚它们在生命周期、作用域和请求行为上的差别。
放在同一页切换和对照，能更快看清它们分别适合什么场景。
常见问题
关于数据存储，用户常问这些
会把我输入的数据上传服务器吗？
不会。当前数据存储演示默认只在浏览器本地进行读写，不会上传服务器。
支持 localStorage、sessionStorage 和 Cookie 吗？
支持，这三种常见浏览器本地存储方式都可以直接切换和演示。
适合前端教学吗？
适合，尤其适合演示三种存储方式的生命周期和使用差异。
适合正式保存敏感信息吗？
不适合。它更适合调试和教学说明；敏感信息仍应按正式安全方案处理。