导航：首页 > 开发技术 >

JavaScript中本地存储和会话存储怎么用

发表于：2025-01-19 作者：千家信息网编辑

千家信息网最后更新 2025年01月19日，小编给大家分享一下JavaScript中本地存储和会话存储怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！前提知识请按

千家信息网最后更新 2025年01月19日JavaScript中本地存储和会话存储怎么用

小编给大家分享一下JavaScript中本地存储和会话存储怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

前提知识

请按照我以下的步骤来：

1、在任意网页中按F12打开开发者工具

2、单击Application，即应用

3、单击存储，您将在那里看到本地存储和会话存储。

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

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

范例

现在，让我们通过一些示例来了解如何对本地存储进行操作。

示例1：将键值对提供给本地存储

localStorage.setItem('Name1', 'uiu');

控制台执行，查看效果

让我们看看本地存储的" typeof "：

示例2: 本地存储中设置键值对

在上面的示例中，我们看到了 如何在本地存储中设置键值对。

现在，让我们了解如何从本地存储中获取键值对。

let Name1 = localStorage.getItem('Name1')console.log(Name1)

示例3: 获取空值

现在，让我们尝试获取一些不存在的值。

let Name2 = localStorage.getItem('Name2');console.log(Name2)

如果您尝试从不存在的本地存储中获取某些内容，则结果为 null 。

很多时候我们希望将数组存储在本地存储中，因为数组很容易使用（我们有很多内置的数组方法）。

但是，本地存储的一个限制是它将数组存储为字符串。让我们看看我的意思：

// 本地存储localStorage.setItem('WebSite', 'uiuing.com');// 定义ProgrammingLanguage数组let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']// 本地存储存储 ProgrammingLanguage数组localStorage.setItem('favoriteProgrammingLanguage', ProgrammingLanguage);

为了克服这个问题☝️，我们使用 JSON.stringify。请看下面的实际操作

示例 4：将数组存储在本地存储中

现在我们使用 JSON.stringify 将数组存储在本地存储中

localStorage.setItem('WebSite', 'uiuing.com');let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']// 这里讲原先的ProgrammingLanguage 修改为了 JSON.stringify(ProgrammingLanguage)localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

示例 5：从本地存储中获取数组

从本地存储中获取数组。

上面的结果可能看起来像一个数组，但我们从本地存储而不是数组获取字符串。

让我证明一下。

因此，为了从本地存储中获取数组，我们使用 JSON.parse ，见下文。

示例 6：从本地存储中获取数组？

现在我们 JSON.parse 使用从本地存储中获取数组

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

因此，我们使用：

JSON.stringify：将数组设置为本地存储中的值。JSON.parse：从本地存储中获取数组。

示例 7：清除本地存储

清理前

localStorage.clear()

运行后

因此，我们可以使用 localStorage.clear() 来清除本地存储

仅从本地存储中删除"name1"键值对。

示例 8：仅从本地存储中删除 Name1 键值对

localStorage.setItem('Name1', 'uiu');localStorage.setItem('WebSite', 'uiuing.com');let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

运行这条命令试试

localStorage.removeItem('Name1');

正如您在上面看到的，为了删除我们使用的特定键值对 localStorage.removeItem 。

会话存储

这就是关于本地存储的全部内容。

我们在 会话存储 中运行类似的操作，唯一的区别是我们使用 sessionStorage 代替 localStorage ：

// 示例1sessionStorage.setItem('Name1', 'uiu');// 示例2sessionStorage.getItem('Name1');// 示例4let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']sessionStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));// 示例6console.log(JSON.parse(sessionStorage.getItem('favoriteProgrammingLanguage')));// 示例7sessionStorage.clear()// 示例8sessionStorage.removeItem('Name1');

让我们运行一下