1. sessionStorage 存储位置

sessionStorage 是浏览器提供的 Web Storage API 的一部分，用于在一个会话期间存储数据。数据保存在浏览器的 内存 中，而不是在硬盘上，且其生命周期仅限于当前浏览器标签页。数据在浏览器窗口或标签页关闭时会被清除。

• 存储位置： 数据保存在浏览器的内存中（而不是服务器端）。
• 生命周期： 当前浏览器会话期间有效（关闭标签页或浏览器后数据丢失）。
• 作用范围： 数据只对当前标签页有效，不会在其他标签页或浏览器窗口中共享。

你可以通过 sessionStorage.setItem() 和 sessionStorage.getItem() 来存储和读取数据。

示例：

// 存储数据
sessionStorage.setItem('username', 'JohnDoe');

// 获取数据
const username = sessionStorage.getItem('username');

// 删除数据
sessionStorage.removeItem('username');

// 清除所有数据
sessionStorage.clear();

2. Vuex 存储位置

Vuex 是 Vue.js 状态管理库，用于集中式管理应用状态。Vuex 存储的数据是存在 浏览器内存 中的，跟 sessionStorage 不同，Vuex 存储的数据是由 Vue 应用程序本身管理的，而不是浏览器的 Web Storage API。

• 存储位置： 数据保存在 Vuex 状态树（JavaScript 对象）中，属于浏览器内存。
• 生命周期： Vuex 数据在应用的生命周期内有效，页面刷新会清空 Vuex 数据，除非你将数据持久化（例如，使用插件如 vuex-persistedstate）。
• 作用范围： 数据在整个 Vue 应用中共享，任何组件都可以访问和修改 Vuex 中的状态。

在 Vuex 中，状态数据存储在 state 中，状态的读取通常通过 getters，状态的修改通过 mutations 和 actions 完成。

示例：

// 在 Vuex store 中定义状态
const store = new Vuex.Store({
  state: {
    username: 'JohnDoe',
  },
  mutations: {
    setUsername(state, newUsername) {
      state.username = newUsername;
    }
  },
  actions: {
    updateUsername({ commit }, newUsername) {
      commit('setUsername', newUsername);
    }
  }
});

// 访问 Vuex 数据
console.log(store.state.username); // 输出: JohnDoe

// 修改 Vuex 数据
store.commit('setUsername', 'JaneDoe');
console.log(store.state.username); // 输出: JaneDoe

对比总结

总结：

• sessionStorage 适用于需要在单个会话中持久化存储的数据，而 Vuex 更适合用于在应用的不同组件之间共享和管理状态。
• 如果需要持久化 Vuex 状态，可以使用 vuex-persistedstate 插件，将数据存储到 localStorage 或 sessionStorage 中。