web应用中的面包屑前端存储方案

前段时间在项目开发中，由于项目中有两级菜单且在第二级菜单页面中操作的过程中会进入第三级的操作页面。为了友好的对用户指引，让用户有效的理解自己所处的页面层级。加入了面包屑功能。对面包屑数据存储方案做了分析。

页面结构

在这里引用ant.design的图片。页面结构大概如此。有一级导航、二级导航。在二级导航中可以通过操作进入不在导航中的页面。

image.png

面包屑导航

面包屑导航是在用户界面中的一种导航辅助。它是用户用来在一个在程序或文件中确定和转移他们位置。

天猫商城面包屑

image.png

面包屑导航数据特性

1. 属于全局数据，生命周期开始于用户进入系统，结束于用户退出系统。
2. 刷新当前页面后面包屑数据不能丢失。
3. 如果系统允许打开多个标签页，它不在多个标签页中共享。各自标签页中维护各自面包屑数据，不能互相影响。

第一条特性决定了，它必须作为全局数据来存储。全局的数据存储方式有很多，单页面常见的有全局变量（window）、状态管理模器（vuex,redux）、sessionStorage、locationStorage。

第二条特性决定了全局变量、状态管理模器不适合存储这类数据，因为它们刷新后就会消失，除非重新添加。

第三条特性决定了，不合适去使用localStrage去存储它，因为在多个标签页下localStorage是共享的。虽然也有办法可以在localStrage区分标签页（通过设置标签页id来确定标签页），但成本过高。

解决方案

根据以上的分析，总结了两种存储方案。

1. 存储在sessionStorage
2. 存储在路由数据之中

存储在sessionStorage

因为sessionStorage并不违背面包屑导航数据存储的三个特性因此可以将其存储在sessionStorage。

操作流程

进入应用 => 创建面包屑
切换页面 => 修改面包屑
退出应用 => 卸载面包屑

存储在路由数据中

由于面包屑的改变发生在页面（视图）切换的时刻。而在存在路由的系统中，页面（视图）都是与路由一一对应。因此路由改变就意味着面包屑的改变。可以将路由数据和面包屑数据做关联。路由改变时装载其对应的面包屑数据。

前提条件：

1. 系统必须存在路由系统，例如vue-router,react-router。
2. 一个路由不能由多个上级路由操作进入。这样就无法确认准确的路径。例如：修改学生信息页面可以由学生信息管理页面和班级成员管理两个页面操作进入。但是进入后路由的匹配路径确实相同的，此时就无法根据路由来确认面包屑导航。

操作流程

路由变化 => 修改面包屑