vuex与本地存储的区别,vuex本地存储持久化

Vue中存储数据方法：localStorage、sessionStorage和Vuex的区别和简单使用

localStorage和sessionStorage都是通过键值对的方式进行存储，用于不同页面之间传值 （注意：它们都只接受存储字符串类型的数据，若遇到json格式的数据需要使用JSON.stringify()将数据转化为字符串类型） ，区别在于：

1、sessionStorage：用于短期存储，当浏览器关闭之后sessionStorage中存储的数据就会被清除，浏览器不关闭仅关闭网页数据不删除。

2、localStorage：用于长期存储，当浏览器关闭之后localStorage存储的内容不会被清除，数据一直存储在本地。

vuex常被用于两个组件进行数据交互时，如一个组件修改了某一个数据，需要另一个组件也同步这个更改，而localStorage和sessionStorage无法同步更改，这时就需要使用vuex来达到这个目的。

14.vuex和localStorage，全局变量的区别

Vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面，之前存储的vuex数据全部都会被初始化掉。

localStorage是H5提供的一个更简单的数据存储方式，之前是用cookie存放数据，但是cookie的数据量太小，所以就用localStorage，它可以有5M的限制，不受刷新页面的控制，长久保存。

所以，在用vue进行项目开发的时候，什么时候用到vuex呢？

当应用遇到多个组件共享状态时候，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。

vuex的官网也说了，对于页面之间的传参对于多层嵌套组件将会很繁琐，而且对于兄弟组件之间的状态传递无能为力。所以就将这些组件的共享状态抽取出来，以一个全局单例模式管理，即vuex。

vuex和全局变量的区别：

1，【响应式】vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效更新。

2，【不能直接改变store】不能直接改变store的变化，改变store中状态的唯一途径是commit?mutation。方便于跟踪每一个状态的变化。

vuex与浏览器缓存的区别

vuex ：关闭标签页后会随之销毁

LocalStorage ：保存直到到自定义的时间结束，不设置过期时间则永久保存

SectionStorage ：保存时间为当前会话，与 vuex 相似关闭标签页后自动销毁

vuex ：存储在内存当中

storage ：存储在本地文件

vuex ：用于各组件公共状态的管理，因为是是响应式的所以 vuex 更方便快捷，虽然 storage 也可以实现但是需要通过 $on 和 $emit 的形式去触发响应，而且storage是以字符串的形式保存的还需要 JSON.parse() 和 JSON.stringify() 去读写

storage ：可以用于在刷新页面 vuex 数据初始化的问题，因为在页面刷新的时候 vuex 会重新加载数据会初始化，可以在设置 vuex 的同时设置 storage 当刷新页面时如果 vuex 被初始化拿不到数据时可以使用缓存中记录的数据

23、Vuex、localStorage、sessionStorage、cookies的区别

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

用法：?

储存：sessionStorage.setItem("变量名", "变量值")；

获取： sessionStorage.getItem("变量名")；

localStorage?方法存储的数据长期存在浏览器中，必须手动清除

用法：?

储存：localStorage.setItem("变量名", "变量值")；

获取：localStorage.getItem("变量名");

Vuex 是一个专为?Vue.js?应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

用法：

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 )?,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --?F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage 页面关闭后就清除掉了， localstorage不会。

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

vuex和localstorage存储数据有什么区别

uex是状态管理用的，就是组件数据共享的那种，一个组件的数据变化会映射到使用这个数据的其他组件。再说localstorage，那个是H5提供的一个更简单的数据存储的方式，之前是用cookie存放，但是cookie存放的数据量太小，而且接口麻烦。localstorage的数据可以有5M的限制，相当大了已经，而且api相当简单好记，方便使用，在以后相信会成为主流的。

Vuex 与 Localstorage 的区别

1.最重要的区别

一，vuex 存储在内存

二，localstorage 以文件的方式存储在本地

三，localstorage 只能存储字符串类型的数据，储存对象需要JSON的Stringify 和 parse 方法进行处理，读取内存比读取硬盘速度要快

2.应用场景，

一，vuex 是一个专为vue.js 应用程序开发的状态管理模式，它采用集中式管理应用的所有组件状态，并以相应的规则保证

状态的以一种 可以预测的方式发生变化，vuex 用于组件之间的传值，

二，localstorage 是本地储存，是将数据存储到浏览器的方法，一般在跨页面传递数据时使用。

三，vuex能够做到数据的响应式，localstorage 不能

3.永久性

刷新页面时vuex存储的值会丢失，localstorage 不会，