【无标题】

一、背景

该需求主要为了判断用户是怎么样到达当前页面，是从上一页面返回还是刷新当前页面，如果从上一页面返回则需要从sessionStorage对象中获取对应属性值，并渲染。如果是刷新当前页面则需要移除sessionStorage对象中得属性值，并且还原元素样式。

二、代码

                    if (performance.navigation.type === performance.navigation.TYPE_BACK_FORWARD) {
                        o.busTypeView = sessionStorage.getItem('busTypeView');
                        o.busTypeStatus = sessionStorage.getItem('busTypeStatus');
                        o.StdHoursCtrl = sessionStorage.getItem('StdHoursCtrl');
                        o.isShowDraft = sessionStorage.getItem('isShowDraft');
                        //$(`input[name="type"][value="${o.data.WorkListType}"]`).prop('checked', true);
                        form.render()
                    } else { // 刷新页面
                        sessionStorage.removeItem('busTypeView');
                        sessionStorage.removeItem('busTypeStatus');
                        sessionStorage.removeItem('StdHoursCtrl');
                        sessionStorage.removeItem('isShowDraft');
                        $(`input[name="type"][value="${o.busTypeView}"]`).prop('checked', false);
                        $(`input[name="type"][value="${o.busTypeStatus}"]`).prop('checked', false);
                        $(`input[name="type"][value="${o.StdHoursCtrl}"]`).prop('checked', false);
                        $(`input[name="type"][value="${o.isShowDraft}"]`).prop('checked', false);
                    }

1. 检查导航类型:

   • 使用performance.navigation.type来检测用户是如何到达当前页面的。如果值为performance.navigation.TYPE_BACK_FORWARD，说明用户是通过浏览器的前进或后退按钮来到这个页面的。

2. 恢复页面状态（前进/后退时）:

   • 在这种情况下，从sessionStorage中恢复之前保存的页面状态变量：busTypeView、busTypeStatus、StdHoursCtrl、和isShowDraft。
   • 虽然注释掉了设置表单控件选中状态的代码（$(input[name="type"][value="${o.data.WorkListType}"]).prop('checked', true);），但根据上下文，这部分原本可能用于根据恢复的值设置表单中的选项状态。
   • 调用form.render()可能是为了更新表单渲染，确保UI与恢复的状态一致，这通常在使用前端框架如layui时会出现。

3. 刷新页面时的操作:

   1. 如果页面不是通过前进或后退操作加载的（即用户刷新页面或直接访问），则从sessionStorage中移除这些状态变量，以准备加载初始页面状态或新的数据。
   2. 接下来的几行代码尝试取消选中某些表单项，但这里存在一个逻辑错误：它试图根据之前保存的值取消选中表单的选项，而实际上应该根据当前逻辑或默认状态来设定这些选项。注意，这里的代码假设o.busTypeView等变量可以直接作为value属性的值来查找对应的输入元素，这可能与实际情况不符，除非这些变量确实直接对应于表单中input元素的value。

三、performance.navigation介绍

performance.navigation 是浏览器提供的一个性能接口，它是 PerformanceNavigation 接口的实例，属于Web Performance API的一部分。这个接口提供了关于当前页面加载方式的信息，主要用于帮助开发者了解用户是如何到达当前页面的，比如是通过点击链接、刷新、后退/前进按钮、或者是其他方式。

performance.navigation 主要有以下几个属性，用来描述导航类型：

• type: 这个属性返回一个整数值，表示网页的加载来源。可能的值包括：
  • 0（performance.navigation.TYPE_NAVIGATE）: 表示常规的页面加载，如用户点击链接、地址栏输入URL、通过脚本操作加载新页面等。
  • 1（performance.navigation.TYPE_RELOAD）: 表示页面是通过刷新操作加载的。
  • 2（performance.navigation.TYPE_BACK_FORWARD）: 表示页面是通过浏览器的后退或前进按钮加载的。
  • 255（performance.navigation.TYPE_RESERVED）: 保留值，目前未使用。

通过检查 performance.navigation.type 的值，开发者可以做出相应的逻辑处理，例如在用户通过后退按钮回到页面时恢复之前的状态，或者在页面刷新时清除一些临时数据，以此来提升用户体验或优化应用性能。