一.背景介绍：
在“单机”模式下，只需要使用其本身所建立的变量即可。显然，在如今的前端环境，一个稍微正式点的项目都不太可能是这个情况，页面的跨越、服务器后台进行数据请求等，都需要一个或数个传参的方法。
二.知识剖析
几种常见的传参方式
1，localStorage和sessionStorage
将数据存储在localStorage中，如果不使用removeItem()或者delete删除，或者用户未清楚浏览器缓存，数据会一直保留在磁盘上，一般它的大小有5M的限制。另外，要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一个协议，在同一个端口上
而数据存储在sessionStorage中，该数据只保持到浏览器关闭，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
他们都属于storage类型，因此拥有storage类型的方法
保存数据：setItem(key,value)
读取数据：getItem(key)
删除单个数据：removeItem(key)
删除所有数据：clear()
得到某个索引的key：key(index)
2，cookie传递参数
HTTP Cookie，通常直接叫做cookie，Cookie是浏览器访问服务器后，服务器传给浏览器的一段数据。
目前有些 Cookie 是临时的，有些则是持续的。临时的 Cookie 只在浏览器上保存一段规定的时间，一旦超过规定的时间，该 Cookie 就会被系统清除.
3，URL传递参数
一个完整的网页地址大致分成protocol、host、path、search、hash五部分，其中search和hash（?号以后的数据）是我们可以在程序中作为参数部分进行传递。在网页初始化的时候读取search和hash的数据然后进行一系列操作，而search（?name=张三&type=admin）也常用作后台的请求参数。
4，ajax
AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
三.常见问题
在什么情况适合使用以上介绍的传递方式？
四.解决方案
在传递少量不涉及隐私的参数时可以使用直接url或者Form的GET方式传递，大量数据可以用POST传递
五.编码实战
$(function() {
//获取url中传来的数据
var openId = getParamValue("openId")
//当传递过来的数据中包含有中文数据的时候，需要在添加编码设置，
//也就可以写成这样：var name = decodeURI(getParamValue("userName"))这样写的话
//就可以正确获得中文字符。
})
//分解url获得数据部分
function getUrlParams() {
var search = window.location.search
// 写入数据字典
var tmparray = search.substr(1, search.length).split("&")
var paramsArray = new Array
if (tmparray != null) {
for (var i = 0i <tmparray.lengthi++) {
var reg = /[=|^==]/// 用=进行拆分，但不包括==
var set1 = tmparray[i].replace(reg, '&')
var tmpStr2 = set1.split('&')
var array = new Array
array[tmpStr2[0]] = tmpStr2[1]
paramsArray.push(array)
}
}
// 将参数数组进行返回
return paramsArray
}
// 根据参数名称获取参数值
function getParamValue(name) {
var paramsArray = getUrlParams()
if (paramsArray != null) {
for (var i = 0i <paramsArray.lengthi++) {
for (var j in paramsArray[i]) {
if (j == name) {
return paramsArray[i][j]
}
}
}
}
return null
}
AJAX
function orderCancel(orderId, commant){
var flag = false
$.ajax({
type: "POST",
url: "../order/orderCancel.action", //orderModifyStatus
data: {"orderId":orderId,"commant":commant},
dataType:"json",
success: function(data){ //参数正确执行
var member = eval("("+data+")")//包数据解析为json 格式
if(member.success=="true"){ //请求成功执行
flag = true
}else if(member.success=="false") { //请求失败执行
alert(member.info)
}
},
error: function(json){ //参数错误执行
alert("订单取消异常，请刷新后重试...")
}
})
hidediv()
return flag
}
五.更多讨论
问题1：本地stroage和会话storage？
回答1：一个是永久存储本地，一个是网页关闭就删除
六.参考资料
参考一： url方法
参考二： ajax方法
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
戳我注册 ~
JS语法中的传递参数，对于初学者是一个非常重要的概念。很多小伙伴在学习“值传递”和“引用传递”时，会有不少烦恼。今天我们就来通过各种姿势全方位剖析JS中的值传递。本文章将会用10分钟时间无死角的解析JS的传参方式，希望能对您有所帮助。
先说结论，JS只有值传递，没有引用传递。这句话可能会颠覆一些小伙伴的认知，但请先别急，马上你将会赞同我。
值传递是什么？
在函数传参的过程中，实参将数值传递给形参。
EXP：
function fun(x) {
console.log(x)
}
let a = 123
fun(a)
1
2
3
4
5
6
1
2
3
4
5
6
运行结果
在fun(a)这个函数调用语句中，实参为a、形参为x，从输出结果来看，可以证明实参a将数值123传给了形参x。
疑问：是否可以通过形参x数值的修改，来改变实参a的值？
EXP：
function fun(x) {
x = 666
}
let a = 123
fun(a)
console.log(a)
1
2
3
4
5
6
7
1
2
3
4
5
6
7
运行结果:
可以看到实参a的数值并没有因为x的改变而发生变化。是因为值传递的特点决定，咱们接着往下看。
2、值传递的特点：
单向传递，只能将实参的数值传递给形参，不能将形参的值传递给实参。
EXP：
我们希望编写一个交换两个变量数值的函数swap。
有一个办法很方便a.js文件改成其他服务器端脚本，但输出是js语法格式
比如把a.js改成a.php文件
代码示例如下：
<?php $id = $_GET['id'] echo ' function tan(){ alert("' . $id . '") } '这个文件会获取提供的id的值，然后生成一个js函数方法
调用的时候：
<script type="text/javascript" src="a.php?id=20"></script><button onclick="tan()">Click</button>
上面是js引入这个php文件，并提供一个参数id，值是20
然后加了一个按钮触发点击事件调用a.php生成的js函数方法，结果是会弹出20的提示警告框
效果如下图：
满意请采纳。
