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

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

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

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

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

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

新建
导出Excel







订餐人





订餐单位

 
        
        单位1
        单位2
    



订餐时段

 
        
        早餐
        午餐
    

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

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

通过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

 
 

b.html

 
 

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

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