分享人：宋恒
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
js中的传值方式，对于简单类型（比如字符串和数值）就是值传递和引用传递。但是HTML页面之间如何传递数据？ 如果是动态页面，根本就不需要考虑这个问题，可以如果是一个纯HTML+JavaScript的应用， 无法使用数据库等操作，没有保存数据，光依靠前端的手段该如何实现页面之间的传递数据和参数呢？
第一种常见的是通过url传值
主要原理是：通过GET方法然后获取URL从中解析出传递的数据
//获取到的url值是以"?"开头的url
var deocdeURL = decodeURI(location.search);//解码url
//封装的解析url的方法
function doClickfamg(){
var pureURL = deocdeURL.split("?")[1];//获取"?"以后的参数
var valuesArray = pureURL.split("&");
var url_Object = new Object();
for(var i = 0;i< valuesArray.length;i++){
var key_value = valuesArray[i].split("=");
//动态给对象添加key和value
//是以传递过来的key和value作为解析后的新的对象的key和value
url_Object[key_value[0]] = key_value[1];
}
return url_Object;//返回对象
}
获取url传的值
//调用解析方法
var mydecodeURI = doClickfamg();
//比如我要知道传递的key2的value是什么
alert(mydecodeURI.key2);
代码实战：实现的效果是在index.html输入username和password之后点击Post提交按钮之后将index.html中的两个参数传递到Read.html页面中， Read.html中的js代码获取参数并做处理弹出两个弹窗显示两个参数
优点：
1.URL地址法简洁易用可同时传递多个字符型参数；
2.URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；
不足：
3.URL传递参数长度受限，最大为2K；
4.URL只能传递字符型参数，传递中文时由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；
5.URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。
Cookie是什么
Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户访问 web 页面时，他的名字可以记录在 cookie 中。 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。 Cookie 以名/值对形式存储
Cookie原理和特点
第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会将cookie放入到响应请求中，在浏览器第二次发请求的时候，会把cookie带过去，服务端会辨别用户身份，当然服务器也可以修改cookie内容
cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。
由于 cookie 最终都是以文件形式存放在客户端计算机中，所以查看和修改 cookie 都是很方便的，这就是为什么常说 cookie 不能存放重要信息的原因。
一个 cookie 的生命周期就是在浏览器关闭的时候结束。想要 cookie 能在浏览器关掉之后使用，就要为 cookie 设置有效期
在js中操作cookie
document.cookie = "userName = mike";
还可以在cookie中添加过期时间，默认在浏览器关闭时删除cookie
document.cookie = "userName = mike expires = Mon,14 Oct 2018 12:00:00 GMT";
读取cookie
let data = document.cookie;
存储有效期
localStorage 永久性。除非WEB应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，否则数据会一直保留在用户电脑上，永不过期。 实际上，localStorage的数据是写入磁盘中，每次读取数据时，实际上是从硬盘驱动器上读取这些字节。
sessionStorage 窗口或标签页被永久关闭，则通过sessionStorage存储的数据也被删除。
常用操作
localStorage.setItem("x",1);//以"x"的名字存储一个数值
localStorage.x = 1;//直接向 Web 存储对象添加键/值对
localStorage.getItem("x");//获取数值
localStorage.x;//直接从 Web 存储对象中检索键/值对
localStorage.removeItem("x");//删除“x”项。
//removeItem是唯一通用的能删除单个名值对的方式。（因为IE8不支持delete操作符）
localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式
//将一个数组存储为字符串
var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);
//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组
var myArray = JSON.parse(localStorage.formData);
sessionStorage关闭浏览器后清除在，这里演示一下localStoraged的特点
sessionStorage关闭浏览器后清除在，这里演示一下localStoraged的特点
这几种页面传参方式选用哪种比较好
根据页面功能来选择比较好，比如像登录页，就可以使用ajax或者angular 通过URL来传递参数进行页面验证。 localStorage\sessionStorage则可以在像任务2-4上这种页面上使用， 而cookie的用途就是解决"如何记录客户端的用户信息"，在需要存储诸如用户名，搜索历史等数据时便可以使用
es6中的函数传参是什么
对于其他语言来讲，传参分为传值类型和传引用（指针）类型。如果是传值，函数内部对于参数的改变不会影响到外部变量或对象； 如果是传引用（指针），在函数内部做的修改则会对外部的变量和对象造成影响。 从技术层面来讲，javascript参数的传递方式全部都是传值类型，当我们将一个值传递到函数内部时， 一个临时的局部变量会被创建，形成对这个参数的一个拷贝，任何对该值的改变都不会影响原有的外部变量。
感谢大家观看
宋恒