关于使用外界存储判断进入页面的方式

项目中遇到了一个关于调用查询接口时机的问题：

　　1.由于查询接口的数据量过大，且左侧有树列表，所以希望在进入页面时不进行查询；

　　2.在树列表切换后，不进行查询而是加载成未查询状态

　　3.在查询数据点入的详情页返回时，需要根据之前的查询条件进行查询

整体流程：

　　进入页面-树列表未点击-查询接口未调用-查询明细列表无数据——>点击树列表-查询接口未调用-查询明细列表无数据——>点击查询按钮-调用接口-记住查询条件-加载查询列表——>点击查看明细按钮-进入明细页面-返回本页面后根据查询条件加载列表——>点击树列表-清除查询条件-清空列表为未加载状态

解决问题1：进入页面时不调用查询接口，点击左侧树列表切换后不调用查询接口

解决问题2：将明细列表现有数据清空，还原最初未加载数据状态。但由于组件本身设置，选择摧毁明细列表，重新加载一个空列表

解决问题3：清空查询条件，将mounted周期内的调用接口根据是否具有查询条件来判断是否调用。但清空查询条件一步由于是内置方法，遇到些许问题，遂通过添加一个额外的flag进行判定是否是另一页面跳转进入

问题3后续：采用cookie操作不够安全，并且有额外占用。查找发现可以通过window的sessionStorage属性进行判断：在明细页的mounted周期内set一下sessionStorage，在返回后的页面判断是否具有设置的sessionStorage属性值，如果有，改变，加载查询接口，如果没有，不加载接口。

sessionStorage.setItem("lastname", "Smith");
sessionStorage.getItem("lastname");
sessionStorage.removeItem("lastname");
sessionStorage.clear();

localStorage.setItem("lastname", "Smith");
localStorage.getItem("lastname");
localStorage.removeItem("lastname");

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。而localStorage会长久保存，直到手动删除，推荐使用sessionStorage属性。

标签：存储,sessionStorage,外界,加载,接口,查询,lastname,列表,页面
来源： https://www.cnblogs.com/DL6526/p/15902059.html