当前位置: 首页> 文旅> 美景 > 苏州做网站公司认定苏州聚尚网络_镇江整站优化_长沙推广公司_网络营销专业学什么课程

苏州做网站公司认定苏州聚尚网络_镇江整站优化_长沙推广公司_网络营销专业学什么课程

时间:2025/7/11 18:56:53来源:https://blog.csdn.net/weixin_71329368/article/details/144073766 浏览次数:0次
苏州做网站公司认定苏州聚尚网络_镇江整站优化_长沙推广公司_网络营销专业学什么课程

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,状态的修改通过 mutationsactions 完成。

示例:

// 在 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

对比总结

特性sessionStorageVuex
存储位置浏览器内存浏览器内存(Vue 应用的状态树)
生命周期当前会话有效(标签页关闭后数据丢失)当前应用会话有效(刷新页面后数据丢失)
作用范围仅限于当前标签页或窗口Vue 应用中的所有组件可以访问和修改
数据类型键值对,通常以字符串存储,可通过 JSON 转换复杂数据任何 JavaScript 对象,支持嵌套和复杂数据结构
持久化数据在标签页关闭时丢失默认情况下数据在页面刷新后丢失,可通过插件持久化
同步/异步同步支持同步和异步(通过 mutationsactions

总结:

  • sessionStorage 适用于需要在单个会话中持久化存储的数据,而 Vuex 更适合用于在应用的不同组件之间共享和管理状态。
  • 如果需要持久化 Vuex 状态,可以使用 vuex-persistedstate 插件,将数据存储到 localStoragesessionStorage 中。
关键字:苏州做网站公司认定苏州聚尚网络_镇江整站优化_长沙推广公司_网络营销专业学什么课程

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: