面试题之Vuex，sessionStorage，localStorage的区别

Vuex、localStorage 和 sessionStorage 都是用于存储数据的技术，但它们在存储范围、存储方式、应用场景等方面存在显著区别。以下是它们的详细对比：

1. 存储范围

• Vuex：

  • 是 Vue.js 的状态管理库，用于存储全局状态。

  • 数据存储在内存中，页面刷新后数据会丢失。

  • 只在当前应用实例的生命周期内有效。

• localStorage：

  • 是浏览器提供的 Web Storage API 的一部分。

  • 数据存储在浏览器的本地存储中，即使关闭浏览器或刷新页面，数据仍然存在。

  • 数据没有过期时间，除非手动清除。

• sessionStorage：

  • 同样是 Web Storage API 的一部分。

  • 数据存储在浏览器的会话存储中，数据在浏览器的会话期间有效。

  • 关闭浏览器标签页或窗口后，数据会被清除。

2. 存储方式

• Vuex：

  • 基于 JavaScript 对象存储数据。

  • 数据存储在内存中，通过 Vue 的响应式系统实现数据的动态更新。

  • 支持复杂的数据结构（如对象、数组等）。

• import { createApp } from 'vue'
  import { createStore } from 'vuex'

  // 创建一个新的 store 实例
  const store = createStore({
    state () {    
      return {
        count: 0   
       }  
      }, 
    mutations: {    
      increment (state) {     
          state.count++    
      }  
     }
    }) 

  const app = createApp({ /* 根组件 */ }) // 将 store 实例作为插件安装
  app.use(store)

  store.commit('increment')//通过 store.commit 方法触发状态变更

  console.log(store.state.count) // 你可以通过 store.state 来获取状态对象

• localStorage 和 sessionStorage：

  • 数据以键值对的形式存储，键和值都必须是字符串。

  • 如果要存储复杂数据结构（如对象或数组），需要通过 JSON.stringify() 将其转换为字符串，读取时再通过 JSON.parse() 转换回原始格式。

3. 存储容量

• Vuex：

  • 存储容量受限于浏览器的内存大小，通常可以存储较大的数据量，但过多的数据可能会影响性能。

• localStorage 和 sessionStorage：

  • 每个存储的容量通常在 5MB 左右（具体取决于浏览器）。

  • 如果超出容量限制，浏览器会抛出错误。

4. 应用场景

• Vuex：

  • 用于管理 Vue 应用的全局状态，如用户登录状态、主题切换、购物车数据等。

  • 适合在组件之间共享数据，尤其是在多个组件需要访问同一状态时。

  • 数据存储在内存中，适合临时存储，不适用于持久化存储。

• localStorage：

  • 用于持久化存储数据，如用户偏好设置、主题模式、用户自定义数据等。

  • 适合存储不频繁更新但需要长期保存的数据。

• sessionStorage：

  • 用于存储单次会话的数据，如登录态、表单缓存等。

  • 适合存储仅在当前会话期间需要的数据，关闭浏览器后数据自动清除。

5. 安全性

• Vuex：

  • 数据存储在内存中，相对安全，但仍然可以通过开发者工具查看。

  • 不适合存储敏感信息（如密码等）。

• localStorage 和 sessionStorage：

  • 数据存储在浏览器的本地存储中，可以通过开发者工具轻松访问。

  • 不适合存储敏感信息（如密码、令牌等），因为它们容易被恶意脚本窃取。

6. 性能

• Vuex：

  • 数据存储在内存中，访问速度快。

  • 由于是响应式系统，数据更新会自动触发组件重新渲染。

• localStorage 和 sessionStorage：

  • 数据存储在浏览器的本地存储中，访问速度相对较慢。

  • 每次读写操作都会触发浏览器的 I/O 操作，可能会对性能产生一定影响。

7. 同步性

• Vuex：

  • 是单向数据流，通过 actions、mutations 等方法更新状态，确保状态的同步性和一致性。

• localStorage 和 sessionStorage：

  • 数据存储是独立的，需要手动同步数据。

  • 如果多个标签页同时操作存储，可能会导致数据不一致。

总结

• Vuex 适合管理 Vue 应用的全局状态，数据存储在内存中，适合临时存储。

• localStorage 适合持久化存储不频繁更新的数据，数据存储在浏览器本地。

• sessionStorage 适合存储单次会话的数据，数据存储在浏览器会话中。

在实际开发中，可以根据需求选择合适的存储方式，也可以结合使用它们来满足不同的需求。