标签：存储 sessionStorage 外界 加载 接口 查询 lastname 列表 页面

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

　　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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。