web應用中的麪包屑前端存儲方案

前段時間在項目開發中，因爲項目中有兩級菜單且在第二級菜單頁面中操做的過程當中會進入第三級的操做頁面。爲了友好的對用戶指引，讓用戶有效的理解本身所處的頁面層級。加入了麪包屑功能。對面包屑數據存儲方案作了分析。

頁面結構

在這裏引用ant.design的圖片。頁面結構大概如此。有一級導航、二級導航。在二級導航中能夠經過操做進入不在導航中的頁面。

麪包屑導航

麪包屑導航是在用戶界面中的一種導航輔助。它是用戶用來在一個在程序或文件中肯定和轉移他們位置。

天貓商城麪包屑

麪包屑導航數據特性

1. 屬於全局數據，生命週期開始於用戶進入系統，結束於用戶退出系統。
2. 刷新當前頁面後面包屑數據不能丟失。
3. 若是系統容許打開多個標籤頁，它不在多個標籤頁中共享。各自標籤頁中維護各自麪包屑數據，不能互相影響。

第一條特性決定了，它必須做爲全局數據來存儲。全局的數據存儲方式有不少，單頁面常見的有全局變量（window）、狀態管理模器（vuex,redux）、sessionStorage、locationStorage。

第二條特性決定了全局變量、狀態管理模器不適合存儲這類數據，由於它們刷新後就會消失，除非從新添加。

第三條特性決定了，不合適去使用localStrage去存儲它，由於在多個標籤頁下localStorage是共享的。雖然也有辦法能夠在localStrage區分標籤頁（經過設置標籤頁id來肯定標籤頁），但成本太高。

解決方案

根據以上的分析，總結了兩種存儲方案。

1. 存儲在sessionStorage
2. 存儲在路由數據之中

存儲在sessionStorage

由於sessionStorage並不違背面包屑導航數據存儲的三個特性所以能夠將其存儲在sessionStorage。

操做流程

進入應用 => 建立面包屑 切換頁面 => 修改麪包屑 退出應用 => 卸載麪包屑

存儲在路由數據中

因爲麪包屑的改變發生在頁面（視圖）切換的時刻。而在存在路由的系統中，頁面（視圖）都是與路由一一對應。所以路由改變就意味着麪包屑的改變。能夠將路由數據和麪包屑數據作關聯。路由改變時裝載其對應的麪包屑數據。

前提條件：

1. 系統必須存在路由系統，例如vue-router,react-router。
2. 一個路由不能由多個上級路由操做進入。這樣就沒法確認準確的路徑。例如：修改學生信息頁面能夠由學生信息管理頁面和班級成員管理兩個頁面操做進入。可是進入後路由的匹配路徑確實相同的，此時就沒法根據路由來確認麪包屑導航。

操做流程

路由變化 => 修改麪包屑