本地存储简介

本地存储是 HTML5 引入的一种在用户浏览器中保存数据的技术，主要包括 LocalStorage 和 SessionStorage 两种方式。相比传统的 Cookie，本地存储容量更大且操作更方便。

LocalStorage

• 数据永久存储，除非手动清除，否则数据一直保留。
• 用于保存需要长期保存的数据，如用户偏好设置、登录状态等。

// 存储数据
localStorage.setItem("username", "张三");

// 读取数据
const user = localStorage.getItem("username");

// 删除数据
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();

SessionStorage

• 数据仅在当前会话有效，关闭浏览器或标签页后数据会被清除。
• 适合存储临时数据，如页面状态、临时表单数据。

// 存储数据
sessionStorage.setItem("token", "abc123");

// 读取数据
const token = sessionStorage.getItem("token");

特点比较

存储方式	生命周期	存储容量	典型用途
LocalStorage	永久（除非清除）	约 5MB	用户设置、登录状态等
SessionStorage	当前会话（标签页关闭）	约 5MB	临时数据、页面状态

使用场景

• 记住用户登录信息
• 保存用户个性化设置
• 缓存部分数据减少服务器请求
• 实现离线访问功能

小结

本地存储提供了更大容量和更简单的 API 来保存客户端数据，是现代 Web 应用提升性能和用户体验的重要手段。