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打开的窗口，不能跨域。 4.4 localStorage、sessionStorage： 优点：使用起来非常简单、方便。 缺点：兼容性有点小问题。兼容性： 现代浏览器（firefox safari chrome opera）都支持，IE8以下（不包括IE8）不支持。 4.5 session： 优点：安全性比较好 缺点：当访问增多，会比较占用你服务器的性能 5.编码实战 Demo1：url传参 https://ptteng.github.io/PPT/demo/js-03-TransferParametersWay/demo1.html Demo2：cookie传参 https://ptteng.github.io/PPT/demo/js-03-TransferParametersWay/othertwo.html Demo3：Window.open传参 https://ptteng.github.io/PPT/demo/js-03-TransferParametersWay/demo3.html Demo4：localStorage、sessionStorage传参 https://ptteng.github.io/PPT/demo/js-03-TransferParametersWay/demo4.html 6.扩展思考 更多的页面传参方法： http://www.cnblogs.com/GetAlert/p/4435193.html 7.参考文献 JS页面间传值： http://blog.csdn.net/qq380107165/article/details/7330612 JS页面间数据传递的各种方法： http://www.cnblogs.com/GetAlert/p/4435193.html js页面之间传参方式集合： http://blog.csdn.net/u012545279/article/details/17530561 前端在html页面之间传递参数的方法： http://blog.csdn.net/liuyan19891230/article/details/50961335 Javascript关于传递值到另外一个页面： https://www.zhihu.com/question/32104492 8.更多讨论 除了前台页面间传参，我们还需要传参给后台来进行数据的交互，怎样传参给后台呢？ PPT链接： https://ptteng.github.io/PPT/PPT/js-03-TransferParametersWay.html#/ |
注册
登录