sessionStorage和localStorage的区别及如何存储对象信息

引言：最近在做一个webapp项目，前端需要存储token和user信息，同时需要将user信息存储在vuex中，但是每次刷新页面会把vuex的信息清空，下面是解决的方法。

一.sessionStorage和localStorage的区别？
sessionStorage：页面刷新不会消失，浏览器关闭消失。
localStorage：页面刷新不会消失，浏览器关闭不会消失。持久化在硬盘。
vuex：页面刷新即消失。

1.登录
登录后将token和user信息保存在localstorage。

image.png

需要注意的地方是localstorage只能存储String类型的数据，所以我们先把user对象 JSON.stringify(user) 转换成json字符串，获取的时候再JSON.parse即可。
此时也将user信息保存再vuex中。

2.为了防止页面刷新vuex消失，我在路由的钩子函数中将localstorage的user重新赋值给了vuex。

搞定！