vue本地存储和获取数据

// 使用 Vue 本地存储和获取数据

// 存储数据到 localStorage
function saveDataToLocalStorage(key, value) {
  // 将数据转换为 JSON 字符串并存储到 localStorage 中
  localStorage.setItem(key, JSON.stringify(value));
}

// 从 localStorage 获取数据
function getDataFromLocalStorage(key) {
  // 从 localStorage 获取数据并解析为 JavaScript 对象
  const data = localStorage.getItem(key);
  return data ? JSON.parse(data) : null;
}

// 示例：存储和获取用户信息
const user = {
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com'
};

// 存储用户信息
saveDataToLocalStorage('user', user);

// 获取用户信息
const storedUser = getDataFromLocalStorage('user');
console.log(storedUser); // 输出: { name: '张三', age: 25, email: 'zhangsan@example.com' }

解释说明：

1. saveDataToLocalStorage(key, value):

   • 这个函数用于将数据存储到浏览器的 localStorage 中。它接受两个参数：key（存储键）和 value（要存储的数据）。由于 localStorage 只能存储字符串，因此我们使用 JSON.stringify 方法将对象或数组转换为 JSON 字符串后存储。

2. getDataFromLocalStorage(key):

   • 这个函数用于从 localStorage 中获取数据。它接受一个参数：key（存储键）。我们使用 JSON.parse 方法将存储的 JSON 字符串解析回 JavaScript 对象或数组。如果 key 不存在，则返回 null。

3. 示例代码:

   • 我们创建了一个包含用户信息的对象 user，然后调用 saveDataToLocalStorage 函数将其存储到 localStorage 中。
   • 接着，我们使用 getDataFromLocalStorage 函数从 localStorage 中读取并输出用户信息。

这样你就可以在 Vue 应用中轻松地存储和获取数据了。