怎么把本地存储的值存到本地

你可以使用localStorage对象来将值存储在本地。以下是一个例子：

// 存储值
localStorage.setItem('key', 'value');

// 获取值
var value = localStorage.getItem('key');

// 删除值
localStorage.removeItem('key');

在这个例子中，我们使用setItem()方法将键值对存储在本地，getItem()方法获取值，removeItem()方法删除值。你可以将'key'和'value'替换为你自己的键和值。

相关问题

vue3登录 token存本地

好的，您想了解如何在Vue3中实现登录并将token存储在本地吗？

首先，在登录成功后，将token存储在本地可以使用浏览器提供的localStorage或sessionStorage。在Vue3中，可以在Vue实例的创建过程中，通过创建一个全局的$store对象来实现存储和管理状态数据。

以下是一些示例代码，可以帮助您更好地了解如何在Vue3中实现登录并将token存储在本地：

1. 在登录页面中，您可以通过表单提交来处理用户输入的登录信息，如下所示：

<template>
  <form @submit.prevent="login">
    <label>
      Email:
      <input type="email" v-model="email" required>
    </label>
    <label>
      Password:
      <input type="password" v-model="password" required>
    </label>
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async login() {
      // 发送登录请求并获取token
      const { token } = await api.login(this.email, this.password)

      // 将token存储到本地
      localStorage.setItem('token', token)

      // 跳转到首页或其他需要登录的页面
      this.$router.push('/')
    }
  }
}
</script>

2. 在Vue实例的创建过程中，可以创建一个全局的$store对象来存储和管理状态数据，如下所示：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      token: localStorage.getItem('token') || null
    }
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    }
  }
})

export default store

在上面的代码中，我们通过使用localStorage.getItem('token')来获取本地存储的token值，并将其存储在Vuex的状态管理中。

3. 在需要使用token的地方，可以通过Vuex的getters来获取存储在状态管理中的token值，如下所示：

<template>
  <div v-if="$store.getters.isAuthenticated">
    <!-- 显示需要登录后才能访问的内容 -->
  </div>
  <div v-else>
    <p>Please login to access this content.</p>
  </div>
</template>

<script>
export default {
  computed: {
    isAuthenticated() {
      return !!this.$store.state.token
    }
  }
}
</script>

在上面的代码中，我们使用了Vuex的getters来获取存储在状态管理中的token值，并将其用于判断用户是否已经登录。

希望这些示例代码能够帮助您更好地了解如何在Vue3中实现登录并将token存储在本地。

为什么浏览器本地储存里面显示了存的值存在，我存完值后里面取值却返回null呢

可能是因为您在存储值时出现了错误或者存储方式不正确。浏览器本地储存一般有两种方式：localStorage和sessionStorage。localStorage是在浏览器关闭后依然可以保留数据的存储方式，而sessionStorage是只能在当前会话中保留数据的存储方式。如果您使用了localStorage存储数据，可能是因为存储时没有使用setItem方法，或者存储时使用的key值与取值时的key值不一致导致取值失败。建议您检查一下代码，确保存储和取值的key值一致，并且使用setItem方法存储数据。