sessionStorage在项目中的应用

sessionSotrage:

  • 过期时间：会话结束时被清除。只对当前标签页有效，即使两个标签页打开的是同一个链接，sessionStorage也是相互隔离的
  • 存储大小：5MB。具体视浏览器而定，点击此处测试

起因

公司后台项目前端页面，需要用到标签页，当点击A标签页中的链接跳转页面再返回后，需要到B标签页，而点击B标签也中的链接跳转再回来后，要保持在B标签页中。如果从别的菜单回到当前菜单，要打开A标签页

原来的解决方法

将标签页值存入localStorage中，每次回来后读取localStorage中的值，有则使用，无则回A标签页。同时监听路由，判断是否跳出当前菜单，决定是否清空localStorage

遇到的问题

当用户直接关闭页面或浏览器时，状态来不及处理，会导致下一次打开时，使用到关闭之前的状态

解决方法

换成使用seeeionStorage，基于sessionStorage关闭标签或页面就清空的特性，可以保证每次打开都是A标签页，成功解决问题