localStorage、sessionStorage、cookie的本质区别
本质区别
- localStroage的生命周期是永久的,关闭页面或浏览器之后,localstorage中的数据也不会消失。localstorage除非主动删除数据,否则数据永远不会消失
- sessionStrage的生命周期是只在当前会话下有效。sessionstorage引入了一个浏览器窗口的概念,sessionstorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionstorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口,同一个页面,sessionstorage也是不一样的
- cookie生命周期为只在设置的cookie生命周期过期之前一直有效,即使串口或浏览器关闭。存放数据大小为4k左右,有个数限制,一般不超过20个,缺点是不能存储大数据且不易读取。
建议
由于 vue 是单页面应用,操作都是在一个页面跳转路由,因此 sessionStorage 较为合适
原因:
- sessionStorage 可以保证打开页面时 sessionStorage 的数据为空
- 每次打开页面 localStorage 存储着上一次打开页面的数据,因此需要清空之前的数据