localStorage、sessionStorage、cookie的本质区别

本质区别

• localStroage的生命周期是永久的，关闭页面或浏览器之后，localstorage中的数据也不会消失。localstorage除非主动删除数据，否则数据永远不会消失
• sessionStrage的生命周期是只在当前会话下有效。sessionstorage引入了一个浏览器窗口的概念，sessionstorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionstorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口，同一个页面，sessionstorage也是不一样的
• cookie生命周期为只在设置的cookie生命周期过期之前一直有效，即使串口或浏览器关闭。存放数据大小为4k左右，有个数限制，一般不超过20个，缺点是不能存储大数据且不易读取。

建议

由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适

原因:

• sessionStorage 可以保证打开页面时 sessionStorage 的数据为空
• 每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据