简单了解LocalStorage/SessionStorage/Vuex 区别是什么?

每天一杯Java

已于 2024-05-06 23:02:42 修改

阅读量188

点赞数 1

文章标签：前端 javascript 开发语言

于 2024-05-06 22:58:38 首次发布

本文链接：https://blog.csdn.net/swx3155602684/article/details/138511011

版权

区别：

LocalStorage：是通过本地数据存储的，以文件的方式存储在本地；

sessionStorage：只是本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后也随之销毁；

Vuex：是一个全局状态数据管理，存储在内存中，没有内存大小限制；是专门为vue.js应用程序开发的状态管理模式；通过采用集中式存储管理应用的所有组件的状态；且以相应的规则保证状态以一种可预测的方式发生改变；

应用场景：

LocalStorage：一般用于跨页面传递数据场景；长期性保存的数据；

sessionStorage：适用于单页应用程序，方便再各业务模块进行传值；

也用于敏感账号的一次性登录，关闭当时页面再次打开时会需要重新登录

Vuex：是专门为vue.js应用程序开发的状态管理模式；用于组件之间传值

存储永久性：

LocalStorage窗口或浏览器关闭也始终有效；

sessionStorage仅在当前浏览器关闭前有效；

vuex在刷新页面时存储的值就会丢失

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

每天一杯Java

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单了解LocalStorage/SessionStorage/Vuex 区别是什么?

LocalStorage与Vuex和sessionStorage
复制链接

扫一扫

vuex和sessionStorage

zmyalh的博客

11-30

712

1.vuex的存储和ssession的存储 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { user_uid:'', user_token: '', user:{photo:''}, }, mutations: { SESS_USER(state,user_uid){ state.user

VUE vuex、localStorage和sessionStorage的区别

ICanWin_lll的博客

08-16

727

一、vuex vuex是vue中的状态管理机制,用于组件之间共享数据，数据保存在内存中一个组件的数据变化会映射到使用这个数据的其他组件。再说localstorage 刷新页面的话，之前存在vuex里的数据会被初始化掉，vuex里面的数据会丢失掉。二、localStorage localstorage（本地存储）则以文件的方式存储在本地,永久保存 localStorage会持久化存储，而且在多页面可以共享 localStorage无法和Vue很好的结合，修改之后不会触发View的响应式变化

参与评论您还未登录，请先登录后发表或查看评论

vuex和本地存储（localstorage，sessionstorage）的区别和应用场景

2201_75681314的博客

03-19

1002

localstorage不可以代替vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据的数据源，希望另一个组件也改变的时候localstorage，sessionstorage无法做到，vuex是vue的状态管理机制，是方便组件之间通信的，一个组件的数据变化会映射到使用这个数据的其他组件，而localstorage是本地存储，将数据存储到浏览器的方法，一般是在跨页面传递数据的时候使用。

vuex和sessionstorage的区别

chengzi_jiaotang的博客

11-10

1070

下面看戏vuex存储和本地存储(localstorage、sessionstorage)的区别 1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地 2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。 3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一

vuex 和localstorage、sessionstorage，区别

rgpbrave的博客

11-30

2566

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理 2.应用场景：vuex(响应式的)用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。（非响应式的，

localStorage、sessionStorage、vuex区别和使用感悟

u_ndefine_d的博客

01-16

573

我用的场景是打开多个窗口查看不同年度的数据，导致使用localStorage存储的年度信息被覆盖，比如A窗口是2023年，B窗口是2024年，当在打开B窗口年度切换到2024年，这时localStorage存储的就是2024，A窗口再去使用localStorage存储的年度时就变成了2024而不是正确的2023了，所以更改方案时；3.2、将Vuex中的数据直接保存到浏览器缓存中：可以将Vuex中的数据保存到sessionStorage、localStorage或cookie中。最后，移除本地存储中的数据。

localStorage、sessionStorage、vuex使用及区别

maidu_xbd的博客

03-23

852

目录 Vuex localStorage sessionStorage 语法区别 Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 localStorage 译为“本地存储器”，是HTML5中新增的一个存储对象，跟cookie一样也是用来本地存储来的，但是解决了...

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

01-21

这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到...

详解vuex结合localstorage动态监听storage的变化

08-27

主要介绍了详解vuex结合localstorage动态监听storage的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vuejs-storage:Vue和Vuex插件通过localStoragesessionStorage持久化数据

05-22

这个插件提供了与localStorage和sessionStorage （或类似的东西）到Vue和Vuex的简单绑定。它，因此它确实很小。 .js大小：5.75KB（压缩后的1.7KB） .min.js大小：2.21KB（压缩后的1.1KB）用法 //in webpack ...

详解vue中localStorage的使用方法

12-09

- sessionStorage与localStorage类似，但其生命周期仅限于当前会话，即浏览器窗口关闭后，存储的数据将被清除。 localStorage的作用域基于协议、主机名和端口，这意味着在同一协议、主机和端口下的所有页面都能共享...

python爬虫基础——Webbot库介绍

qq_56262770的博客

07-22

990

Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。

Vue使用FullCalendar实现日历/周历/月历

_小郑有点困了的博客

07-23

296

需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。

TS如何处理js模块的类型？

最新发布

闻人放歌的三寸青草园圃

07-24

246

【代码】TS如何处理js模块的类型？

VUE 子组件可以直接改变父组件的数据吗

Cshaosun的博客

07-23

299

如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。

Odoo Registry 源码解读：前端世界的魔法师

清水欧度 Odoo ERP

07-23

988

它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。

【CTFWP】ctfshow-web42

LongL_GuYu的博客

07-23

951

CTFWP，ctfshow-web42

localStorage 或 sessionStorage存储与vue中的state的区别是什么

06-01

2. 存储方式不同：localStorage 和 sessionStorage 存储是通过浏览器提供的 API 实现的，而 Vue 中的 state 是通过 Vuex 状态管理库实现的； 3. 生命周期不同：localStorage 存储的数据会一直存在，除非手动删除或者...