前端学习笔记-本地存储和会话存储

最新推荐文章于 2025-07-13 10:50:33 发布

原创最新推荐文章于 2025-07-13 10:50:33 发布 · 941 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文详细讲解了本地存储localStorage与会话存储sessionStorage的区别，包括数据持久性、操作方法和适用场景。通过实例展示了如何存储和获取键值对，以及数组，并介绍了各自的清理机制。

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

(本地存储和会话存储都存储键值对。

本地存储和会话存储的主要区别在于，在关闭浏览器后，存储在会话存储中的键值对会丢失，本地存储不会)

1、本地存储

localStorage.setItem('键', '值');  //本地存储键值对
//typeof 为object类型
let Name = localStorage.getItem('键') //在本地存储中获取键值对
console.log(Name)  //输出值
//如果从不存在的本地存储中获取内容，则结果为 null

本地存储的一个限制是它将数组存储为字符串，所以我们使用JSON.stringify 将数组存储在本地存储中。

let name = ['a', 'b', 'c']

localStorage.setItem('name1',JSON.stringify(name)); //将name以数组形式存储在name1中

之后我们就使用 JSON.parse 从本地存储中获取数组

 console.log(JSON.parse(localStorage.getItem('name1')));

因此，我们使用：JSON.stringify：将数组设置为本地存储中的值。JSON.parse：从本地存储中获取数组。用 localStorage.clear() 来清除本地存储。用localStorage.removeItem('键')删除特定键值对。

2、会话存储

// 存储键值对
sessionStorage.setItem('键', '值');

// 获取
sessionStorage.getItem('键');

// 存储数组
let name = ['a', 'b', 'c']
sessionStorage.setItem('name1',JSON.stringify(name));

// 获取数组
console.log(JSON.parse(sessionStorage.getItem('name1')));

// 清除会话存储
sessionStorage.clear()

// 清除特定键值对
sessionStorage.removeItem('键');