vue使用localstorage

Vue是一款流行的JavaScript框架，广泛用于构建用户界面。它提供了许多方便的功能和工具，其中一个功能就是使用localstorage来存储数据。

LocalStorage是HTML5中引入的Web存储API之一，它允许开发者在客户端存储和取出字符串数据，该数据在同一个域名下的网页之间是共享的。

在Vue中使用LocalStorage非常简单，只需要使用localStorage对象的setItem和getItem方法来存储和获取数据。下面是一个使用LocalStorage的示例：

```javascript

// 在Vue组件中使用LocalStorage

export default {

data() {

return {

message: ''

savedMessage: ''

}

}

methods: {

saveMessage() {

localStorage.setItem('message'

this.message)

}

loadMessage() {

this.savedMessage = localStorage.getItem('message')

}

}

}

```

在这个示例中，我们定义了一个Vue组件，并在data中定义了一个message属性和一个savedMessage属性。在saveMessage方法中，我们使用localStorage.setItem将message的值存储到本地存储中。在loadMessage方法中，我们使用localStorage.getItem来获取之前保存的message的值，并将其赋值给savedMessage属性。

除了setItem和getItem方法，LocalStorage还提供了removeItem方法来删除一个键值对，和clear方法来清空所有的键值对。下面是一个示例：

```javascript

// 删除一个键值对

localStorage.removeItem('message')

// 清空所有键值对

localStorage.clear()

```

需要注意的是，LocalStorage只能存储字符串类型的数据，如果需要存储其他类型的数据，需要先将其转换为字符串再存储。我们可以使用JSON.stringify和JSON.parse来进行转换。