Vuex、localstorage、sessionstorage、cookice区别

vuex和localstorage

1. vuex 中的数据是存储在内存中的，页面刷新就会丢失；而 localstorage 则是存储在计算机本地，以文件的方式存储，永久保存，刷新并不会丢失；
2. localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

应用场景：vuex用于组件之间的传值,（响应式的），localstorage则主要用于不同页面之间的传值（其他页面更新数据了，当前页面要刷新才能相应更新，非响应式的）

永久性：vuex全局变量存储，当刷新页面时vuex存储的值会丢失（存在内存里的，刷新了，当然会丢失），localstorage不会。

localstorage、sessionstorage、cookie

共同点：用于浏览器端存储的缓存数据
不同点：

1. 存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费； web storage（localStorage和sessionStorage）,会将数据保存到本 地，不会造成宽带浪费；
2. 数据存储大小不同：Cookie数据不能超过4K,适用于会话标识； web storage数据存储可以达到5M;
3. 数据存储的有效期限不同：cookie只在设置了Cookid过期时间之 前一直有效，即使关闭窗口或者浏览器； sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；
4. 作用域不同：cookie和localStorage是在同源同窗口中都是共享 的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页 面；

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