vue中,在本地缓存中读写数据的方法

在 Vue 中，在本地缓存中读写数据可以使用 HTML5 中提供的 localStorage 和 sessionStorage两种方式。下面将详细讲解这两种方式的使用方法。

localStorage

localStorage 提供了一种比 Cookie 更优秀的存储方式，存储的数据大小限制为 5MB 左右。下面是从本地缓存中读写数据的示例代码：

// 写入数据
localStorage.setItem('key', 'value');

// 读取数据
let value = localStorage.getItem('key');

在上述示例中，我们通过调用 setItem() 方法将数据写入本地缓存，并使用 getItem() 方法读取数据。

如果我们需要将对象存储到本地缓存中，可以将对象使用 JSON.stringify() 方法转换为 JSON 字符串，然后再将字符串写入到本地缓存中，读取时再通过 JSON.parse() 方法解析出对象。具体示例如下：

let obj = { name: 'Tom', age: 18 };
localStorage.setItem('obj', JSON.stringify(obj));

let str = localStorage.getItem('obj');
let obj2 = JSON.parse(str);
console.log(obj2.name); // 'Tom'

在上述示例中，我们将对象序列化成字符串并写入到本地缓存中，读取时再将字符串反序列化成对象。

sessionStorage

sessionStorage 与 localStorage 类似，也是利用本地缓存存储数据，但是存储的生命周期在用户关闭标签页或浏览器后就会消失。下面是从本地缓存中读写数据的示例代码：

// 写入数据
sessionStorage.setItem('key', 'value');

// 读取数据
let value = sessionStorage.getItem('key');

在上述示例中，我们同样也是通过调用 setItem() 方法将数据写入本地缓存，并使用 getItem() 方法读取数据。

需要注意的是，虽然 sessionStorage 与 localStorage 的用法类似，但它们之间是相互独立的，数据也是存储在不同的缓存区域中的。

以上就是在 Vue 中，在本地缓存中读写数据的完整攻略，希望可以帮助各位开发者更好地使用本地缓存技术。