详解localStorage和sessionStorage，以及两者的区别

程序猿小野

已于 2023-11-07 11:18:28 修改

阅读量6.4k

点赞数 24

分类专栏： JavaScript 文章标签：开发语言 javascript 前端

于 2023-10-24 00:03:34 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42289279/article/details/134000908

版权

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了浏览器的localStorage和sessionStorage，包括它们的存储数据、获取数据、更新和删除数据的方法，以及它们在作用域、生命周期、存储容量和数据共享方面的差异。同时强调了同源策略对数据访问的限制。

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

localStorage：

localStorage 是浏览器提供的一种客户端存储机制，用于在用户的浏览器中存储键值对形式的数据。下面是关于 localStorage 的详细解释：

1. 存储数据：

使用 localStorage 存储数据非常简单。你可以使用 JavaScript 的 localStorage 对象，在客户端将数据以键值对的形式存储在浏览器中。例如，要存储一个名为 "username" 的值为 "John" 的数据，可以使用以下代码：

localStorage.setItem("username", "John");

2. 获取数据：

使用 localStorage 获取存储的数据也很简单。你可以使用 localStorage.getItem(key) 方法，通过指定键来获取对应的值。例如，要获取之前存储的 "username" 的值，可以使用以下代码：

var username = localStorage.getItem("username");

3. 更新数据：

如果你想更新已存储的数据，只需使用相同的键来设置新的值即可。例如，要更新之前存储的 "username" 的值为 "Jane"，可以使用以下代码：

localStorage.setItem("username", "Jane");

4. 删除数据：

可以使用 localStorage.removeItem(key) 方法来删除特定键的数据。例如，要删除之前存储的 "username" 的数据，可以使用以下代码：

localStorage.removeItem("username");

5. 清空数据：

如果你想一次性删除所有存储在 localStorage 中的数据，可以使用 localStorage.clear() 方法。例如，要清空所有数据，可以使用以下代码：

localStorage.clear();

在 localStorage 中存储对象时，需要将对象转换为字符串形式，因为 localStorage 只能存储字符串数据。你可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串，然后将其存储在 localStorage 中。当需要使用存储的对象时，可以使用 JSON.parse() 方法将 JSON 字符串转换回原始的 JavaScript 对象。以下是一个示例，演示如在 localStorage 中存储和获取对象：

// 存储对象
var user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

localStorage.setItem("user", JSON.stringify(user));

// 获取对象
var storedUser = localStorage.getItem("user");
var parsedUser = JSON.parse(storedUser);

console.log(parsedUser.name); // 输出 "John"
console.log(parsedUser.age); // 输出 30
console.log(parsedUser.email); // 输出 "john@example.com"

在上面的示例中，我们首先使用 JSON.stringify() 方法将 user 对象转换为 JSON 字符串，然后使用 localStorage.setItem() 方法将其存储在 localStorage 中。当我们需要获取存储的对象时，我们使用 localStorage.getItem() 方法获取存储的 JSON 字符串，然后使用 JSON.parse() 方法将其转换回原始的 JavaScript 对象。

需要注意的是，存储在 localStorage 中的对象经过序列化和反序列化的过程，会丢失对象的方法和原型信息，只保留对象的属性和值。因此，在使用存储的对象时，需要确保对象的方法和原型信息已经重新设置。

`sessionStorage：`

sessionStorage 的语法与localStorage的一致，如上面示例，只需把localStorage对象换成sessionStorage 对象就行。下面主要说说两者的区别：

区别：

1. 作用域不同：

sessionStorage 的作用域限定在当前会话（当前浏览器标签页或窗口），而 localStorage 的作用域是永久的，数据在不同会话（遵循同源策略）之间共享。

2. 生命周期不同：

sessionStorage 的数据在会话结束时被清除，即当用户关闭浏览器标签页或窗口时，sessionStorage 中的数据会被删除。而 localStorage 的数据是持久化的，除非被显式清除，否则会一直保存在客户端。

关于sessionStorage 的生命周期，还想多说几句：sessionStorage 是当前浏览器tab页有效，只要当前浏览器的标签关闭，sessionStorage 中的数据就会被清空，无需整个浏览器关闭。

3. 存储容量不同：

sessionStorage 的存储容量通常比 localStorage 小。一般来说，sessionStorage 的容量限制在 5MB 左右，而 localStorage 的容量限制通常在 5MB 到 10MB 之间，不同浏览器可能会有所不同。

4. 数据共享不同：

sessionStorage 的数据在同一个浏览器标签页或窗口中共享，但不会跨标签页或窗口共享。而 localStorage 的数据在同一个域名下的所有标签页和窗口中共享。

关于sessionStorage 的问题：

浏览器打开了两个标签，访问相同的URL，在其中一个页面点击按钮清空sessionStorage ，会对另外一个标签的sessionStorage 有影响吗？

答案是不会。

在浏览器中，每个标签页都有自己独立的 `sessionStorage` 对象，用于存储会话级别的数据。如果你在一个标签页中执行了清空 `sessionStorage` 的操作，它只会清空当前标签页的 `sessionStorage`，不会对其他标签页的 `sessionStorage` 产生直接影响。