Vue.js 中使用 sessionStorage、localStorage、cookie 的方式详解

在 Web 应用开发中，我们经常需要在客户端存储一些数据，以便在用户下次访问时能够快速加载。常见的存储方式包括 sessionStorage、localStorage 和 cookie。本文将详细介绍 Vue.js 中使用这三种存储方式的方法和注意事项，并提供示例代码。

sessionStorage

sessionStorage 是 HTML5 提供的一种客户端存储方式，它可以在当前会话中存储数据。当用户关闭浏览器窗口时，sessionStorage 中的数据也会被清除。

在 Vue.js 中，我们可以通过 $sessionStorage 对象来访问 sessionStorage。例如，我们可以使用以下代码将数据存储到 sessionStorage 中：

// 存储数据
this.$sessionStorage.set('key', 'value');

我们也可以使用以下代码从 sessionStorage 中获取数据：

// 获取数据
const value = this.$sessionStorage.get('key');

需要注意的是，$sessionStorage 对象的方法和 sessionStorage 对象的方法几乎完全一致。因此，我们可以使用 sessionStorage 的所有方法来操作 $sessionStorage。

localStorage

localStorage 和 sessionStorage 类似，它也是 HTML5 提供的一种客户端存储方式。不同的是，localStorage 中的数据可以在多个会话中共享，并且即使用户关闭浏览器窗口，数据也不会被清除。

在 Vue.js 中，我们可以通过 $localStorage 对象来访问 localStorage。例如，我们可以使用以下代码将数据存储到 localStorage 中：

// 存储数据
this.$localStorage.set('key', 'value');

我们也可以使用以下代码从 localStorage 中获取数据：

// 获取数据
const value = this.$localStorage.get('key');

需要注意的是，$localStorage 对象的方法和 localStorage 对象的方法几乎完全一致。因此，我们可以使用 localStorage 的所有方法来操作 $localStorage。

cookie

cookie 是一种客户端存储方式，它可以在浏览器和服务器之间传递数据。cookie 中的数据可以设置过期时间，以便在一定时间内保持有效。但是，cookie 的大小有限制，并且每次 HTTP 请求都会携带 cookie，因此过多的 cookie 可能会影响性能。

在 Vue.js 中，我们可以通过 $cookies 对象来访问 cookie。例如，我们可以使用以下代码将数据存储到 cookie 中：

// 存储数据
this.$cookies.set('key', 'value', 1); // 过期时间为 1 天

我们也可以使用以下代码从 cookie 中获取数据：

// 获取数据
const value = this.$cookies.get('key');

需要注意的是，$cookies 对象的方法和 cookie 的方法几乎完全一致。因此，我们可以使用 cookie 的所有方法来操作 $cookies。

示例代码

下面是一个示例代码，它演示了如何使用 sessionStorage、localStorage 和 cookie 存储和获取数据：

-- -------------------- ---- -------
------ ------- -
  --------- -
    -- ----
    -------------------------------- ----------
    ------------------------------ ----------
    ------------------------- --------- --- -- ----- - -

    -- ----
    ----- ------ - ---------------------------------
    ----- ------ - -------------------------------
    ----- ------ - --------------------------

    ------------------- ------- -------- -- --------- ------ ------
  -
-

总结

本文介绍了在 Vue.js 中使用 sessionStorage、localStorage 和 cookie 的方法和注意事项，并提供了示例代码。在实际应用中，我们应该根据具体情况选择合适的存储方式，并注意存储数据的大小和过期时间，以避免影响应用性能。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65e641381886fbafa4191849