JS有哪几种传参方式

Posted 2023-04-07

参考技术A 大家好，我是IT修真院成都分院第5期的学员，一枚正直纯洁善良的web程序员

一.背景介绍：

在“单机”模式下，只需要使用其本身所建立的变量即可。显然，在如今的前端环境，一个稍微正式点的项目都不太可能是这个情况，页面的跨越、服务器后台进行数据请求等，都需要一个或数个传参的方法。

二.知识剖析

几种常见的传参方式

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 = 0; i < tmparray.length; i++)

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 = 0; i < paramsArray.length; i++)

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免费指导。快来与我一起学习吧~

戳我注册 ~

网站攻击的方式有哪几种

1、xss（跨站脚本攻击）：富文本、评论

利用站点开放的文本编辑并发布的功能，输入并执行js脚本，窃取cookie等敏感信息。

预防方法：

方法一：cookie添加httpOnly属性，这是使用js是不能读取和操作cookie的。

方法二：在cookie中添加校验信息。

方法三：对用户输入进行编码（encode）、过滤（移除style、script、iframe相关节点）、校正（）

js编码解码：
1、使用参数时，使用encodeURIComponent
2、进行url跳转时，使用encodeURI
3、js使用数据时，使用escape

2、csrf（跨站请求伪造）：支付扣款

伪造用户的请求，冒充用户在站内进行操作。

方法一：使用referer来判定来源页面

方法二：关键操作只接受post请求，因为get请求的参数携带在url中，很容易模拟。

方法三：在http请求中加上token，并在服务器端验证这个token。

方法四：登录、支付的页面加上一些用户互动，比如验证码，确保当前请求是用户发起的。

两者的区别：

1、xss不需要登录；csrf需要用户先登录获取到cookie；

2、xss是在网站A注入js代码，然后执行js代码，达到篡改网站A的内容；

csrf利用网站A的漏洞，去请求网站A的api。

 

Cookie和Token都存需要放在Header里面，为什么只劫持前者？

1、http是无状态的，为了使域名下的所有网页能共享某些数据，因此出现了session、cookie以及token。

2、cookie是用于记录用户状态的一种方式，装有sessionId，由服务端设置，存储在客户端在每个请求中会自动携带。

3、token是无状态的，用户信息都被加密到token中，服务器收到token后解密就可以知道是哪个用户，token不会在请求中自动携带，而需要手动添加。

cookie：用户点击了链接，cookie未失效情况下，后端以为是用户的正常操作，于是进行扣款等操作。

token：用户点击链接，由于浏览器不会自动带上token，即使发了请求，但是后端token验证不通过。