介绍
在 Vue.js 中，我们通常需要在组件之间传递数据或者保存用户的一些偏好设置等信息。这些数据可以通过 Vuex、props、事件总线等方式来传递和管理。但是，有些数据需要在用户关闭网页或者刷新页面后仍然可以保留，这时就需要使用 localStorage。
localStorage 是 HTML5 提供的一种浏览器本地存储机制，可以在浏览器中保存键值对，而且这些数据在关闭浏览器后仍然可以被保留下来。在 Vue.js 中使用 localStorage 进行数据存储非常方便，只需要将数据转化为字符串存储，再从字符串中解析出数据即可。
在本文中，我们将介绍如何在 Vue.js 中使用 localStorage 存储数据，并给出一些示例代码。
存储数据
在 Vue.js 中，我们可以通过以下方式将数据存储到 localStorage 中：
localStorage.setItem(key, JSON.stringify(value));
其中，key 是数据的键名，value 是需要存储的数据。由于 localStorage 只能存储字符串，因此我们需要使用 JSON.stringify() 方法将数据转化为字符串再进行存储。
例如，我们需要将一个对象存储到 localStorage 中：
let user = {
name: 'Tom',
age: 18,
gender: 'male'
};
localStorage.setItem('user', JSON.stringify(user));获取数据
在 Vue.js 中，我们可以通过以下方式从 localStorage 中获取数据：
JSON.parse(localStorage.getItem(key));
其中，key 是数据的键名。由于我们在存储数据时将其转化为了字符串，因此在获取数据时需要使用 JSON.parse() 方法将其转化为对象或者其他数据类型。
例如，我们需要从 localStorage 中获取之前存储的 user 对象：
let user = JSON.parse(localStorage.getItem('user'));
console.log(user.name, user.age, user.gender);删除数据
在 Vue.js 中，我们可以通过以下方式从 localStorage 中删除数据：
localStorage.removeItem(key);
其中，key 是需要删除的数据的键名。
例如，我们需要从 localStorage 中删除之前存储的 user 对象：
localStorage.removeItem('user');示例代码
下面是一个使用 localStorage 存储数据的示例代码：
-- -------------------- ---- -------
----------
-----
------ ------- -------
------- -------------------------------
------- -------------------------------
------- ---------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- --
--
--
-------- -
---------- -
--- ---- - -
----- ------
---- ---
------- ------
--
---------------------------- ----------------------
------------ - --------
--
---------- -
--- ---- - -----------------------------------------
------------ - ---------------------------------------------------
--
------------ -
--------------------------------
------------ - --------
-
-
--
---------在这个示例中，我们定义了一个组件，其中包含了三个按钮，分别是保存数据、加载数据和删除数据。当用户点击这些按钮时，我们将使用 localStorage 进行数据的存储、获取和删除，并在页面上显示相应的提示信息。
总结
在 Vue.js 中使用 localStorage 进行数据存储非常方便，只需要将数据转化为字符串存储，再从字符串中解析出数据即可。在实际开发中，我们可以将用户的一些偏好设置、表单数据等信息存储到 localStorage 中，以便用户下次打开网页时可以直接使用之前保存的数据，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660066ead10417a222baa44e