菜鸟教程
教程 html tutorial

本地存储简介

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

LocalStorage

  • 数据永久存储，除非手动清除，否则数据一直保留。
  • 用于保存需要长期保存的数据，如用户偏好设置、登录状态等。
javascript 
// 存储数据
localStorage.setItem("username", "张三");

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

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

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

SessionStorage

  • 数据仅在当前会话有效，关闭浏览器或标签页后数据会被清除。
  • 适合存储临时数据，如页面状态、临时表单数据。
javascript 
// 存储数据
sessionStorage.setItem("token", "abc123");

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

特点比较

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

使用场景

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

小结

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

相关内容