大家好，我是IT修真院郑州王姣妍，一枚正直、纯洁、善良的web程序员。
今天给大家分享一下，修真院官网 js任务中可能会使用到的知识点：
js有哪几种传参方式？
一、背景介绍
我们今天讲的传参是指页面之间的数据传递。
传统的前端开发中，页面之间是少有参数交互的，甚至没有，而在如今的前端环境下， 一个稍微正式点的项目都不可能少了页面间传参，页面的跨越、服务器后台进行数据请求等，都需要一个或多个传参的方法。 那么参数在不同的页面间进行传递，一个页面的参数被另一页面使用，如何才能做到不同页面间进行参数传递？
在JS中有多种页面传递参数的方法：
1、URL
把参数值附在url后面传递到其他页面
2、H5 web storage
localStroage 和 sessionStorage
3、Cookie
使用浏览器Cookie传递参数
4、Form 表单
Form表单通过URL传递参数
二、知识剖析
1、url传参
把参数值附在url后面传递到其他页面
如：
http://xxx.com/login.html?user=laozhang&pwd=66666
其中“user=laozhang”和“pwd=66666”就是我们传递的参数名称和值。
url和参数之间用"?"隔开
多个参数之间用"&"符号连接。
URL地址传递参数的几个特点：
优点：
1、 URL地址法简洁易用，可同时传递多个字符型参数；
2、 URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；
不足：
3、 URL传递参数长度受限，最大为2K；
4、 URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；
5、 信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。
2、H5 WEB STORAGE
1、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
2、localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中
. 保存后数据永远存在不会失效过期，除非手动清除。
. 不参与网络传输。
. 一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
3、COOKIE
Cookie是当你浏览某网站时，网站存储在你机器上的一个小文本文件， 它记录了你的用户ID，密码、浏览过的网页、停留的时间等信息，当你再次来到该网站时， 网站通过读取Cookie，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语， 或者让你不用输入ID、密码就直接登录等等
Cookie的一些特点。
1.Cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的set-cookie来让浏览器种下Cookie，这是最常见的做法。
2.每次网络请求 Request headers 中都会带上Cookie。所以如果Cookie太多太大对传输效率会有影响。
3.一般浏览器存储Cookie最大容量为4k，所以大量数据不要存到Cookie。
Form表单传值也是通过URL传递参数
跳转至page2.com时，
url为:page2.com?id=laozhang&name=666666
三、常见问题
既然有如此多种页面传参的方式。那么问题来就来了，在什么情况下，适合使用以上介绍的传递方式呢？
四、解决方案
在传递少量不涉及隐私的参数时可以使用直接url或者Form的GET方式传递，大量数据可以用POST传递
会话信息等可以用cookie和localStorage,临时数据可用sessionStorage
五、编码实战
五、编码实战
1、url传参
page1
function post() {
location.href="page2.html?name=laozhang&age=111";
}
page2获取
var url=location.search;//获取url中"?"符后的字串
obj= {};
if(url.indexOf("?") != -1) {//判断是否有参数
varstr=url.substr(1);//从第一个字符开始 因获为第0个是?号 取所有除问号的所有符串
strs=str.split("&");//如果有多个参数 要用&号分隔再用等号进行分隔）
for(var i=0;i<str.length;i++{
obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
console.log(obj.name); //laozhang
console.log(obj.age); //11
2、sessionStorage传参
page1（可以使用setITem（）和getIte（），也可以不用，这里面包含了两种方法，都可以使用）以下是传单个参数
storage传参
function go() {
location.href="page2.html";
}
sessionStorage.name="jim";
sessionStorage.age="21";
// sessionStorage.setItem('name','jim');
// sessionStorage.setItem('age','21');
这是第二个页面,sessionStorage传递参数
//读取
varname=sessionStorage.name;
varage=sessionStorage.age;
//使用getItem()获取参数
// var name = sessionStorage.getItem('name');//取出数据
// var age = sessionStorage.getItem('age');
console.log(name,age);//Jim 21
传一个对象，需要使用Json.stringify()和Json.parse()
page1
storage传参
functiongo() {
location.href="page2.html"
}
varobj= {name:'Jim'};
varstr=JSON.stringify(obj);//把对象转换成json字符串
//存入
sessionStorage.obj=str;
console.log(str); //{"name","jim"}
page2
这是第二个页面,sessionStorage传递对象
//读取
str=sessionStorage.obj;
//重新转换为对象
obj=JSON.parse(str);
console.log(obj);//{mame:"jim"}
3、cookie传参
page1
document.cookie="userId=828";
document.cookie="userName=hulk";
functionsetCookie() {
location.href="page2.html";
}
page2
console.log(document.cookie);//userId=828;userName=hulk
六、参考文献
参考一：js传参方式
参考二：理解cookie及其用法
参考三：h5 web storage
七、更多讨论
1、为啥需要页面之间传参？
在“单机”模式下，只需要使用其本身所建立的变量即可。
显然，在如今的前端环境，一个稍微正式点的项目都不太可能是这个情况，
页面的跨越、服务器后台进行数据请求等，都需要一个或数个传参的方法
现在的前端发展，几个静态页面已经不能满足需求了，为了让页面之间能够互动，这是必然的；
2、除了上述的页面传参方法外，还有哪些方法可以传参？
Window.open：
优点：取值方便，只要window.opener指向父窗口,就可以访问所有对象，不仅可以访问值，还可以访问父窗口的方法.值长度无限制。
缺点：两窗口要存在着关系，就是利用window.open打开的窗口，不能跨域。
基于angular的路由传参，以后会用到暂时还没理解，有兴趣自己去学吧
3、form传参用的多吗？
正常情况下form表单提交会把表单内的内容提交到后台，通过post方法把数据给后台，通过get去获取参数
八、
PPT链接：ppt
视频链接：
undefined_腾讯视频
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论