html页面之间传递参数数据方式（url拼接和cookie）

粗略看了一些文章，在这里总结一下常见的两种，记录下来。

一、url拼接(form表单也是通过参数拼接传递的)

这个一种是window.open传递（该方法一般会跳转新的窗口），一种是window.location.href（该方法一般新页面显示在旧界面上）

两者区别请看该链接：https://www.cnblogs.com/annie211/p/5900972.html

1、第一个页面myorder.html，监听第一排的填写，点击新建后拼接上参数并传递到下一个页面

<div align="right" style="padding:10px">
<button class="layui-btn" id = "new-order-btn" >新建</button>
<button class="layui-btn" id="export-btn" >导出Excel</button>
</div>
<form class="layui-form" action="">
<div id = "searchDiv">
<table id = "table_test" width="100%">
<tbody id="Tb_test1">
<tr>
<td class = "td_search">
<label class="layui-form-label lableWidth">订餐人</label>
<div class="layui-input-block">
<input type="text" name="dcr" id = "dcr" placeholder="请输入订餐人" class="layui-input al-left"></input>
</div>
</td>
<td class = "td_search">
<label class="layui-form-label">订餐单位</label>
<div class="layui-input-block">
 <select name="dcdw" id = "dcdw">
        <option value=""></option>
        <option value="dw1">单位1</option>
        <option value="dw2">单位2</option>
    </select>
</div>
</td>
<td class = "td_search">
<label class="layui-form-label">订餐时段</label>
<div class="layui-input-block">
 <select name="dcsd" id = "dcsd">
        <option value=""></option>
        <option value="zc">早餐</option>
        <option value="wc">午餐</option>
    </select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
<script type="text/javascript">
/*<![CDATA[ */
$(function(){
	  $("#new-order-btn").on('click',function(){
			  var params = "name="+$('#dcr').val()+"&dcdw="+$('#dcdw').val()+"&dcsd="+$('#dcsd').val();
			 
			  var url = "/Users/Administrator.USER-20180424QM/Desktop/wangshangdingcan/neworder.html?"+params;
			   console.log("url ="+url);
			  //方法1 
			  window.open(url,"_blank");
	   });
});

/*]]>*/
</script>

这里通过window.open打开一个新的页面叫neworder.html

2.在新页面中获取上一个页面拼接的参数

<script src="js/getUrlParam.js"></script> 
<script type="text/javascript">
/*<![CDATA[ */
window.onload  = function(){
    var content = window.location.href;
	console.log(content);
	console.log("name = "+UrlParam.paramValues("name")); 
}
/*]]>*/
</script>

通过js来解析url参数

// JavaScript Document
UrlParam = function() { // url参数 
　　var data, index; 
　　(function init() { 
　　　　data = []; //值，如[["1","2"],["zhangsan"],["lisi"]] 
　　　　index = {}; //键:索引，如{a:0,b:1,c:2} 
　　　　var u = window.location.search.substr(1); 
　　　　if (u != '') { 
　　　　　　var params = decodeURIComponent(u).split('&'); 
　　　　　　for (var i = 0, len = params.length; i < len; i++) { 
　　　　　　　　if (params[i] != '') { 
　　　　　　　　　　var p = params[i].split("="); 
　　　　　　　　　　if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | = 
　　　　　　　　　　　　data.push(['']); 
　　　　　　　　　　　　index[p[0]] = data.length - 1; 
　　　　　　　　　　} else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍弃 
　　　　　　　　　　　　continue; 
　　　　　　　　　　} else if (typeof(index[p[0]]) == 'undefined') { // c=aaa 
　　　　　　　　　　　　data.push([p[1]]); 
　　　　　　　　　　　　index[p[0]] = data.length - 1; 
　　　　　　　　　　} else {// c=aaa 
　　　　　　　　　　　　data[index[p[0]]].push(p[1]); 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
　　})(); 
　　return { 
　　　　// 获得参数,类似request.getParameter() 
　　　　param : function(o) { // o: 参数名或者参数次序 
　　　　　　try { 
　　　　　　　　return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]); 
　　　　　　} catch (e) { 
　　　　　　} 
　　　　}, 
　　　　//获得参数组, 类似request.getParameterValues() 
　　　　paramValues : function(o) { // o: 参数名或者参数次序 
　　　　　　try { 
　　　　　　　　return (typeof(o) == 'number' ? data[o] : data[index[o]]); 
　　　　　　} catch (e) {} 
　　　　}, 
　　　　//是否含有paramName参数 
　　　　hasParam : function(paramName) { 
　　　　　　return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false; 
　　　　}, 
　　　　// 获得参数Map ,类似request.getParameterMap() 
　　　　paramMap : function() { 
　　　　　　var map = {}; 
　　　　　　try { 
　　　　　　　　for (var p in index) { map[p] = data[index[p]]; } 
　　　　　　} catch (e) {} 
　　　　　　return map; 
　　　　} 
  　　} 
}();

另一种：

var index = "lemon";

var url = "receive.html?index="+index;

$("#new-order-btn").click(function(){ window.location.href = url; });

除了传递的用的方法不同，实质却都是一样的，都是参数拼接在url上，下个页面在获取

二、cookie

cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。

a.html

<script type="text/javascript" src="./js/jquery.min.js"></script> 
<script type="text/javascript" src="./js/jquery.cookie.js"></script> 
<script> 
　　$.cookie("a","12"); 
</script>

b.html

<script type="text/javascript" src="./js/jquery.min.js"></script> 
<script type="text/javascript" src="./js/jquery.cookie.js"></script> 
<script> 
　　var param = $.cookie("a"); 
　　console.log(param); 
</script>

此处使用了jquery.cookie.js,具体用法可参照此篇文章：

http://blog.csdn.net/csdn_ds/article/details/78022177