这次使用vue-cli构建一个多页面的挣闲钱app，当做到与后端交互获得数据并准备进行渲染的时候遇到了一个问题，即要如何保存数据，避免每次需要数据都得向后端发一次请求。因此一开始使用了vuex进行数据存储并获取，一开始工作的十分流畅，但当我页面跳转之后，我发现vuex里面所有的数据都消失了。因此写这篇文章来记录自己遇到的这个坑。

vuex 存储在内存，localstorage则以文件的形式存储在本地

vuex 属于js，因此vuex使用的数据自然会放在内存。而浏览器在每次刷新页面之后都会清空一次内存，因此vuex存储的消息自然就会消失
而localstorage以文件的形式存储在本地，因此localstorage不会随页面更新而消失

vuex 用于状态管理，管理的是一个页面中不同的component之间的通信

由于本次app大部分都是由单页面组件组成，因此我并没有需要进行同个页面不同component间进行通信的问题。
而vuex，作为一个实现了flux思想的库，主要为了实现一下功能：

1. 组件之间的数据通信

2. 使用单向数据流的方式进行数据的中心化管理

local storage , session storage

• 两者的共同点在于：
  • 存储大小均为5M左右
  • 都有同源策略限制
  • 仅在客户端中保存，不参与和服务器的通信
• 两者的不同点在于：
  • 生命周期 —— 数据可以存储多少时间
    • localStorage: 存储的数据是永久性的，除非用户人为删除否则会一直存在。
    • sessionStorage: 与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删除。
  • 作用域 —— 谁拥有数据的访问权
    • localStorage: 在同一个浏览器内，同源文档之间共享 localStorage 数据，可以互相读取、覆盖。
    • sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了窗口中，也就是说，只有同一浏览器、同一窗口的同源文档才能共享数据。