Vue本地存储删除方法

简介

在Vue中，我们可以使用localStorage或sessionStorage来存储数据，这些数据会一直保存在用户的浏览器中，即使用户关闭了浏览器或电脑重启也不会丢失。但有时候我们需要在某个时刻将这些数据删除，下面是Vue本地存储删除的方法。

使用localStorage

存储数据

使用localStorage存储数据非常简单，只需要调用localStorage.setItem(key, value)函数，将数据存储在localStorage中即可。

localStorage.setItem('name', 'vue')

当然，我们也可以将对象或数组转化为JSON格式，然后再存储到localStorage中。

const student = { name: 'Tom', age: 18 }
localStorage.setItem('student', JSON.stringify(student))

删除数据

在localStorage中删除数据，我们只需要调用localStorage.removeItem(key)函数，将对应key的数据删除即可。

localStorage.removeItem('name')

清空数据

想要清空localStorage中的所有数据，只需要调用localStorage.clear()函数即可。

localStorage.clear()

使用sessionStorage

sessionStorage与localStorage类似，区别是sessionStorage中存储的数据只能在当前会话窗口中有效，当窗口关闭时数据也会被清空。同样地，我们可以使用sessionStorage.setItem(key, value)来存储数据，使用sessionStorage.removeItem(key)删除数据，使用sessionStorage.clear()清空数据。

sessionStorage.setItem('name', 'vue')
sessionStorage.removeItem('name')
sessionStorage.clear()

总结

本文介绍了Vue中使用localStorage和sessionStorage的基本用法，包括存储、删除和清空数据。当我们不需要某些数据时，记得及时将其删除，以减小浏览器负担和保护用户隐私。