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

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

  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属性。

上一篇:canvas画线 文本 填充


下一篇:浏览器indexedDB的使用方法