vuex状态持久化保存，页面刷新保留

最近做的SPA项目用到了vuex，在项目的使用中遇到了一个问题就是当刷新网页后，保存在vuex实例store里的数据会丢失。
在这里做个记录。

一、产生原因

JavaScript代码是运行在内存中的，代码运行时的所有变量，函数，都是保存在内存中的。刷新页面时，以前的内存被释放，重新加载代码，变量重新赋值。
这些数据想要存储就必须存储在外部，这时浏览器提供的存储API localStorage,sessionStorage,IndexDB ,cookie就派上用途了。这些API可以将数据存储在硬盘上，做持久化储存，具体方案可以根据实际情况定夺。

参考资料：https://blog.csdn.net/weixin_36106791/article/details/107159619

解决思路

将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

可以通过将页面的参数和变量保存到sessionStorage中，持久化的保存数据，当刷新后再从sessionStorage将变量和状态取出。

解决方案

首先得选择合适的客户端存储

localStorage是永久存储在本地，除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是l