如何在页面跳转后，再返回上级页面时，保留检索条件，刷新内容

最新推荐文章于 2023-03-31 11:48:01 发布

你不懂我的帅

最新推荐文章于 2023-03-31 11:48:01 发布

阅读量1w

点赞数 1

分类专栏：好用清楚文章标签：前端返回刷新保留检索内容

本文链接：https://blog.csdn.net/qq_34168511/article/details/84991092

版权

清楚同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

好用

0 篇文章 0 订阅

订阅专栏

场景：
主页面：main.jsp
子页面：son.jsp
子页面检索条件：zhonglei，mingcheng，countryCodeS，asins，fnskus，skus

部分子页面代码

//这是子页面的检索条件代码
<tr>
        <td class="tdtitlce2">产品种类</td>
        <td class="tdcontle1"><input type="search" name="PRODUCTTYPES" id="zhonglei" size="30" value=""></td>
        <td class="tdtitlce2">产品名称</td>
        <td class="tdcontle1"><input type="search" name="PRODUCTNAMES" id="mingcheng" size="30" value=""></td>
        <td class="tdtitlce2" width="70">国家</td>
        <td class="tdcontle1"><select name="countryCodeS" id="countryCodeS"></select></td>
      </tr>
      <tr>
        <td class="tdtitlce2">ASIN</td>
        <td class="tdcontle1"><input type="search" name="ASINS" id="asins" size="30" value=""></td>
        <td class="tdtitlce2">FNSKU</td>
        <td class="tdcontle1" ><input type="search" name="FNSKUS" id="fnskus" size="30" value=""></td>
        <td class="tdtitlce2">SKU</td>
        <td class="tdcontle1" ><input type="search" name="SKUS" id="skus" size="30" value=""></td>
      </tr>

主要js代码

//search（）是子页面点击检索时调用的方法
//这个放在子页面的search（）中,存储到本地缓存中……
function setlocal_autoorder_haiyun(){
	console.info("存储检索内容");
	sessionStorage.setItem("autoorder_haiyun_zhonglei",$("#zhonglei").val());
	sessionStorage.setItem("autoorder_haiyun_mingcheng",$("#mingcheng").val());
	sessionStorage.setItem("autoorder_haiyun_countryCodeS",$("#countryCodeS").val());
	sessionStorage.setItem("autoorder_haiyun_asins",$("#asins").val());
	sessionStorage.setItem("autoorder_haiyun_fnskus",$("#fnskus").val());
	sessionStorage.setItem("autoorder_haiyun_skus",$("#skus").val());
}

//这个放在子页面的search（）之前……
function getlocal_autoorder_haiyun(){
	console.info("获取存储好的检索内容，并赋值到对应的检索框中");
	$("#zhonglei").val(sessionStorage.getItem("autoorder_haiyun_zhonglei"));
	$("#mingcheng").val(sessionStorage.getItem("autoorder_haiyun_mingcheng"));
	$("#countryCodeS").val(sessionStorage.getItem("autoorder_haiyun_countryCodeS"));
	$("#asins").val(sessionStorage.getItem("autoorder_haiyun_asins"));
	$("#fnskus").val(sessionStorage.getItem("autoorder_haiyun_fnskus"));
	$("#skus").val(sessionStorage.getItem("autoorder_haiyun_skus"));
}

//这个放在main页面跳转到son页面之前调用的
function removelocal_autoorder(){
	console.info("移除页面存储的内容");
	sessionStorage.removeItem("autoorder_zhonglei");
	sessionStorage.removeItem("autoorder_mingcheng");
	sessionStorage.removeItem("autoorder_countryCodeS");
	sessionStorage.removeItem("autoorder_asins");
	sessionStorage.removeItem("autoorder_fnskus");
	sessionStorage.removeItem("autoorder_skus");
}