简单知识——跨页面信息传递

article/2025/7/6 16:02:55

背景

一个简单的数据查询功能，列表页面有“查看详情”按钮，跳转详情页面时列表的一条记录信息需要传递到详情页面；而详情页面有“返回”按钮，返回的同时也需要将原列表的查询条件回显。

跳转方式直接是 window.location.href，一个典型的跨页面信息传递，属于不同页面之间共享信息的情况。

那么跨页面共享信息的方式有哪些呢？本文将介绍三种方式。

URL参数传递

列表页面的查询参数，可以通过URL的方式传递到下一个详情页面，设置到隐藏表单域中；然后在详情页面返回时，将隐藏表单域中的信息一并拼接到url参数后面返回。

设置隐藏表单域有一个好处，查询条件对详情页面没有用，仅仅作为返回上一个页面时的条件回传，所以可以直接将隐藏表单信息直接拼接到url中，按钮事件如下：

/*** 返回按钮的事件*/
function goBack(){//form表单隐藏域有上一个页面传递过来的参数var query = $("#hiddenForm").serialize();//返回到列表页面window.location.href="dataList.jsp?isBack=true&"+query;
}

cookie传递

对于js对象信息的传递，可先将对象序列化为json字符串，再通过document.cookie的方式写入cookie，然后在下一个页面解析cookie，转换为JSON对象处理。

上述需求中在跳转查看详情页面时，因为当前选中的记录信息已经查询出来了，到了详情页面可以直接使用而不再请求后台。处理方式如下：

第一步，将该条记录序列化后写入cookie中，再跳转。

var currentData = null;
var allDatas= new Array();
function showDetail(index){//将当前记录写入cookiecurrentData = allDatas[index];document.cookie = "currentData="+JSON.stringify(currentData);var url = detail.jsp?now=1";window.location.href = url;
}

第二步，跳转页面加载事件中解析cookie信息：

var currentData=null;
+function ($) {var strCookie = document.cookie;var arrCookie=strCookie.split("; ");for(var i=0;i<arrCookie.length;i++){var spliit=arrCookie[i].split("=");if(spliit[0]=='currentData'){currentData= $.parseJSON(spliit[1]);break;}}//解析完成后立即清理cookiedocument.cookie="currentData=";
}(jQuery);

cookie使用不当，可能会出现问题，主要体现在一个页面上如果存入cookie的信息过多，会出现请求头域过长，后台报异常的问题。

我的一个页面有三个列表，初始时所有需要传递的信息包含四五个JSON对象，在不清楚这些数据的总大小的情况下将所有需要传递的数据都序列化到cookie中，然后就出现头域超长问题了。

异常信息如下：

信息: Error parsing HTTP request header
Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level.
java.lang.IllegalArgumentException: Request header is too large

此时超长的cookie信息如下（主要是几个序列化的大JS对象）：
这里写图片描述