vue用session存取数据

基本使用(vue写的)

    <button @click="addsession">存储session值</button>
    <button @click="session">获取session存储值</button>
    <button @click="deletsession">删除session存储值</button>
    addsession() {
      const data = { "KEY": "111" };
      sessionStorage.setItem("user", JSON.stringify(data));
    },
    session() {
      let user = sessionStorage.getItem("user");
      if (user != null) {
        // 将JSON格式的对象解析为js对象,currentUser为一个js对象
        this.currentUser = JSON.parse(user);
        console.log(JSON.parse(user))
        console.log(user)
      }
    },
    deletsession() {
      sessionStorage.removeItem("user");
    },

解释说明

在Vue.js中使用sessionStorage存储的数据是在整个会话期间保持有效的,这意味着无论您导航到哪个路由,只要在同一个浏览器标签或窗口中,您都可以访问和获取相同的数据。sessionStorage是一个会话级别的存储,数据在同一会话内的不同页面之间共享。

这意味着,如果您在一个页面中使用sessionStorage存储数据,然后导航到另一个Vue.js路由,您仍然可以从那个路由中访问和获取相同的数据。这对于在不同页面之间共享一些状态或数据非常有用。

但要注意以下几点:

  1. 数据仅在同一浏览器标签或窗口中有效。如果您在不同的浏览器标签或窗口中打开应用程序,sessionStorage中的数据不会被共享。

  2. 数据仅在同一会话期间有效。一旦用户关闭浏览器标签或窗口,会话结束,sessionStorage中的数据将被清除。

  3. sessionStorage中存储的数据通常是以字符串形式存储的,因此您可能需要在检索数据时进行反序列化(例如,将JSON字符串解析为JavaScript对象)。

总之,sessionStorage是一个方便的工具,用于在同一浏览器会话内在不同路由之间共享数据,但不会在不同浏览器会话或会话结束后保留数据。

能否替代vuex

sessionStorage 可以用于在Vue.js应用程序中临时存储和共享数据,但它通常不适合替代 Vuex。虽然它们都用于在Vue.js应用程序中管理数据,但它们有不同的目的和用途。

下面是一些关于 sessionStorageVuex 的比较:

  1. sessionStorage:

    • 适用于在同一浏览器会话期间共享数据,例如在不同路由之间共享数据。
    • 用于存储简单的数据,通常以字符串形式存储。
    • 不适用于全局应用程序状态管理,因为它只在客户端本地存储数据。
    • 用于小型应用或需要简单状态管理的场景。
  2. Vuex:

    • 适用于管理全局应用程序状态,包括共享数据、状态管理、和数据的响应式更新。
    • 提供了一个集中式的状态管理工具,使得不同组件之间可以轻松访问和更新数据。
    • 支持模块化、命名空间、中间件等高级状态管理功能。
    • 适用于大型复杂应用程序,或需要高级状态管理和数据传递的场景。

总之,sessionStorage 主要用于临时存储和共享数据,而 Vuex 更适合于应用程序的全局状态管理。如果您的应用需要复杂的状态管理、组件之间的通信以及更高级的功能,那么使用 Vuex 是更好的选择。如果您只需要在不同路由之间共享少量数据,sessionStorage 可能足够了。通常,这两者可以共存,具体取决于您的应用程序需求。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 2中使用Vuex存取数据,首先你需要安装并引入Vuex库。然后,你需要在你的Vue应用中创建一个store实例,该实例将包含你的应用所有的共享数据。 首先,在你的项目中安装Vuex: ``` npm install vuex ``` 然后,在你的入口文件(比如main.js)中引入Vuex并创建一个store实例: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 在这里定义你的共享数据 count: 0 }, mutations: { // 在这里定义修改state的方法 increment(state) { state.count++ } }, actions: { // 在这里定义触发mutations的方法 increment(context) { context.commit('increment') } }, getters: { // 在这里定义获取state的方法 getCount: state => state.count } }) new Vue({ store, // ...其他配置 }).$mount('#app') ``` 现在,你可以在你的Vue组件中通过以下方式来存取数据: 1. 使用`this.$store.state`来获取state中的数据: ```javascript this.$store.state.count ``` 2. 使用`this.$store.commit`来触发mutations中的方法,修改state的数据: ```javascript this.$store.commit('increment') ``` 3. 使用`this.$store.dispatch`来触发actions中的方法,间接地修改state的数据: ```javascript this.$store.dispatch('increment') ``` 4. 使用`this.$store.getters`来获取getters中的数据: ```javascript this.$store.getters.getCount ``` 这样,你就可以在Vue组件中存取Vuex中的数据了。记得在组件中使用`computed`来实时获取数据的变化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值