[武汉|结业弟子]JS-万维娜|2017年04月02日的日报-技能树.IT修真院

发表于： 2017-04-02 20:14:43

2 1210

TASK3 JS有哪几种传参方式?

1.背景介绍

为啥需要页面之间传参？

我们做前端的，总不可能就写那么几个静态页面就可以了，那也太无趣了，为了使前端搞的事有趣一点，就需要页面之间能够互动，这样我们能做的事就更多啦，比如做个小游戏之类的~

2.知识剖析

页面传参主要的几种方式：

1.URL：通过URL进行传值，把要传递的信息接在URL上，然后打开该url后页面获取参数信息，再用js进行处理。

2.cookie（最传统）：Cookie是浏览器存储少量命名数据，它与某个特定的网页或网站关联在一起。Cookie用来给浏览器提供内存，以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据。实现思想就是通过document.cookie进行设置值以及取值。

3.Window.open：这两窗口之间存在着关系，父窗口parent.htm打开子窗口son.htm，子窗口可以通过window.opener指向父窗口，这样可以访问父窗口的对象。

4.session：session会在一定时间内保存在服务器上。

5.localStorage、sessionStorage（html5）：localStorage和sessionStorage一样都是用来存储客户端临时信息的对象，他们均只能存储字符串类型的对象。localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

3.常见问题

传参方式的优缺点？

4.解决方案

4.1 URL传参：

优点：取值方便，可以跨域。

缺点：值长度有限制。

4.2 cookie传参：

优点：兼容性最好，可以在同源内的任意网页内访问，生命期可以设置。

缺点：值长度有限制（存储的容量小），还得注意请求接口时别带到http head。

4.3 Window.open：

优点：取值方便，只要window.opener指向父窗口,就可以访问所有对象，不仅可以访问值，还可以访问父窗口的方法.值长度无限制。

缺点：两窗口要存在着关系，就是利用window.open打开的窗口，不能跨域。