大家好，我是IT修真院上海分院第1期的Web学员刘洪利，今天给大家分享一下关于Js中有几种传参方式

1.背景介绍

        所有函数的参数都是按值传递的,也就是说把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。对于基本类型来说，其复制的是被复制变量在栈中的值，即创建了一个副本，对其中任何一个变量的改变都不会影响另外一个变量。

        对于引用类型来说，其复制的是被复制变量在栈中的值，但是这个值所存储的是变量指向到堆中的对象的指针，即该对象所存储的地址，复制后的变量虽然也是一个副本，但是却指向了与被复制的变量的同一个在堆中的对象。对其中任何一个变量所做的改变都会影响都会影响另外一个变量。    

2.知识剖析

常见的传参方式

1. localStorage、sessionStorage

        1.1. localStorage方法：

        在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。不过储存在localStorage方法中的数据会遵循一条规则，数据保留到通过Javascript删除或者用户清楚浏览器缓存。

        1.2. sessionStorage方法：

        与localStorage基本相同，但是sessionStorage只是储存特定于某个会话的数据，也就是该数据只会保持到浏览器关闭。当浏览器关闭时，sessionStorage所储存的数据会随关闭浏览器一起消失。

        这两种方法同时都属于是storage类型，因此拥有与storage类型相同的使用方法：

                clear(): 删除所有值

                getItem(): 根据指定的名字name获取相应的值

                key(index): 获得index位置处的值的名字

                removeItem(name): 删除由name指定的名值对儿

                setItem(name, value): 为指定的name设置一个对应的值

        值得注意的是，storage类型只能储存字符串,非字符串的数据在存储之前会被转换成字符串

2. 用cookie传递参数

Cookie 是什么

        Cookie是当你浏览某网站时，网站存储在你机器上的一个小文本文件，它记录了你的用户ID，密码、浏览过的网页、停留的时间等信息，当你再次来到该网站时，网站通过读取Cookie，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等

        Cookie 一般有两个作用。

                第一个作用是识别用户身份。

        比如用户A用浏览器访问了http://a.com，那么http://a.com的服务器就会立刻给A返回一段数据[uid=1]（这就是 Cookie）。当A再次访问http://a.com的其他页面时，就会附带上[uid=1]这段数据。

        同理，用户B用浏览器访问http://a.com时，http://a.com发现B没有附带 uid 数据，就给B分配了一个新的 uid，为2，然后返回给B一段数据[uid=2]。B 之后访问http://a.com的时候，就会一直带上[uid=2]这段数据。借此，http://a.com的服务器就能区分A和B两个用户了。

                第二个作用是记录历史。

        假设http://a.com是一个购物网站，当A在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为[uid=1; cart=A1,A2]，表示购物车里有 A1 和 A2 两样商品了。

        这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie。借此，就达到里记录用户操作历史的目的了。

        cookie的特点。

        1.cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法。

        2.每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。

        3.一般浏览器存储cookie 最大容量为4k，所以大量数据不要存到cookie。

3. 常见问题

还有什么其他传递参数的方式？

4.解决方案

        url传参

        通过把参数值附在url后面传递到其他页面

    如：http://xxx.com/login.html?mobile=123&pwd=abc

        其中“mobile=123”和“pwd=abc”就是我们传递的参数名称和值。

        url和参数之间用"?"隔开多个参数之间用"&"符号连接。

    URL地址传递参数的几个特点：

优点：

        1. URL地址法简洁易用，可同时传递多个字符型参数；

        2. URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；

缺点：

        3. URL传递参数长度受限，最大为2K；

        4. URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；

        5. 信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。

5.参考文献

参考一：

菜鸟教程---HTML5 Web 存储

参考二：

「每日一题」简述 Cookie 是什么

参考三：

「每日一题」cookie、session、localStorage分别是什么？有什么作用？

参考四：

Web页面通过URL地址传递参数常见问题及检测方法

鸣谢

感谢大家观看

分享人:刘洪利

视频链接 密码：bmiw

IT修真院上海Web第1期学员刘洪利: 邀请码14898047