sessionStorage和localStorage 使用方法（存储与取值）

最新推荐文章于 2025-07-07 10:22:31 发布

卡洛背心

最新推荐文章于 2025-07-07 10:22:31 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据处理文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_42321819/article/details/113646938

数据处理专栏收录该内容

25 篇文章

订阅专栏

本文介绍了HTML5中的WebStorage机制，包括localStorage和sessionStorage两种存储方式。localStorage用于持久化的本地存储，数据不会过期；sessionStorage则仅限于会话级别，会随会话结束而销毁。文章还提供了这两种存储方式的具体使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5中Web Storage的存储方式，今天介绍 localStorage和sessionStorage两种。

这两者区别在于用于localStorage持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
而sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
也就是你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁。

sessionStorage用法：

  // 保存数据到sessionStorage
  sessionStorage.setItem('key', 'value');
  
  // 从sessionStorage获取数据
  var data = sessionStorage.getItem('key');
   
  // 从sessionStorage删除保存的数据
  sessionStorage.removeItem('key');
   
 // 从sessionStorage删除所有保存的数据
  sessionStorage.clear();

localstory用法：

  //相当于存入本地硬盘
  localstory setItem('key', 'value')
  //取出
  localstory getItem('key', 'value')

项目中建议使用sessionStorage