大家好，我是IT修真院上海分院第1期的Web學員劉洪利，今天給大家分享一下關于Js中有幾種傳參方式
1.背景介紹
????????所有函數(shù)的參數(shù)都是按值傳遞的,也就是說把函數(shù)外部的值復制給函數(shù)內(nèi)部的參數(shù)唇敞，就和把值從一個變量復制到另一個變量一樣。對于基本類型來說，其復制的是被復制變量在棧中的值，即創(chuàng)建了一個副本甥啄，對其中任何一個變量的改變都不會影響另外一個變量。
????????對于引用類型來說炬搭，其復制的是被復制變量在棧中的值蜈漓，但是這個值所存儲的是變量指向到堆中的對象的指針，即該對象所存儲的地址尚蝌，復制后的變量雖然也是一個副本迎变，但是卻指向了與被復制的變量的同一個在堆中的對象。對其中任何一個變量所做的改變都會影響都會影響另外一個變量飘言。????
2.知識剖析
常見的傳參方式
1. localStorage、sessionStorage
????????1.1. localStorage方法：
????????在HTML5中驼侠，新加入了一個localStorage特性姿鸿，這個特性主要是用來作為本地存儲來使用的谆吴，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小苛预，這個在不同的瀏覽器中l(wèi)ocalStorage會有所不同句狼。不過儲存在localStorage方法中的數(shù)據(jù)會遵循一條規(guī)則，數(shù)據(jù)保留到通過Javascript刪除或者用戶清楚瀏覽器緩存热某。
????????1.2. sessionStorage方法：
????????與localStorage基本相同腻菇，但是sessionStorage只是儲存特定于某個會話的數(shù)據(jù)，也就是該數(shù)據(jù)只會保持到瀏覽器關閉昔馋。當瀏覽器關閉時筹吐，sessionStorage所儲存的數(shù)據(jù)會隨關閉瀏覽器一起消失。
????????這兩種方法同時都屬于是storage類型秘遏，因此擁有與storage類型相同的使用方法：
????????????????clear(): 刪除所有值
????????????????getItem(): 根據(jù)指定的名字name獲取相應的值
????????????????key(index): 獲得index位置處的值的名字
????????????????removeItem(name): 刪除由name指定的名值對兒
????????????????setItem(name, value): 為指定的name設置一個對應的值
????????值得注意的是丘薛，storage類型只能儲存字符串,非字符串的數(shù)據(jù)在存儲之前會被轉(zhuǎn)換成字符串
2. 用cookie傳遞參數(shù)
Cookie 是什么
????????Cookie是當你瀏覽某網(wǎng)站時，網(wǎng)站存儲在你機器上的一個小文本文件邦危，它記錄了你的用戶ID洋侨，密碼、瀏覽過的網(wǎng)頁倦蚪、停留的時間等信息希坚，當你再次來到該網(wǎng)站時，網(wǎng)站通過讀取Cookie陵且，得知你的相關信息吏够，就可以做出相應的動作，如在頁面顯示歡迎你的標語滩报，或者讓你不用輸入ID锅知、密碼就直接登錄等等
????????Cookie 一般有兩個作用。
????????????????第一個作用是識別用戶身份脓钾。
????????比如用戶A用瀏覽器訪問了http://a.com售睹，那么http://a.com的服務器就會立刻給A返回一段數(shù)據(jù)[uid=1]（這就是 Cookie）。當A再次訪問http://a.com的其他頁面時可训，就會附帶上[uid=1]這段數(shù)據(jù)昌妹。
????????同理，用戶B用瀏覽器訪問http://a.com時握截，http://a.com發(fā)現(xiàn)B沒有附帶 uid 數(shù)據(jù)飞崖，就給B分配了一個新的 uid，為2谨胞，然后返回給B一段數(shù)據(jù)[uid=2]固歪。B 之后訪問http://a.com的時候，就會一直帶上[uid=2]這段數(shù)據(jù)。借此牢裳，http://a.com的服務器就能區(qū)分A和B兩個用戶了逢防。
????????????????第二個作用是記錄歷史。
????????假設http://a.com是一個購物網(wǎng)站蒲讯，當A在上面將商品 A1 忘朝、A2 加入購物車時，JS 可以改寫 Cookie判帮，改為[uid=1; cart=A1,A2]局嘁，表示購物車里有 A1 和 A2 兩樣商品了。
????????這樣一來晦墙，當用戶關閉網(wǎng)頁悦昵，過三天再打開網(wǎng)頁的時候，依然可以看到 A1偎痛、A2 躺在購物車里旱捧，因為瀏覽器并不會無緣無故地刪除這個 Cookie。借此踩麦，就達到里記錄用戶操作歷史的目的了枚赡。
????????cookie的特點。
????????1.cookie可以使用 js 在瀏覽器直接設置（用于記錄不敏感信息谓谦，如用戶名）, 也可以在服務端通使用 HTTP 協(xié)議規(guī)定的 set-cookie 來讓瀏覽器種下cookie贫橙，這是最常見的做法。
????????2.每次網(wǎng)絡請求 Request headers 中都會帶上cookie反粥。所以如果 cookie 太多太大對傳輸效率會有影響卢肃。
????????3.一般瀏覽器存儲cookie 最大容量為4k，所以大量數(shù)據(jù)不要存到cookie才顿。
3. 常見問題
還有什么其他傳遞參數(shù)的方式莫湘？
4.解決方案
????????url傳參
????????通過把參數(shù)值附在url后面?zhèn)鬟f到其他頁面
????如：http://xxx.com/login.html?mobile=123&pwd=abc
????????其中“mobile=123”和“pwd=abc”就是我們傳遞的參數(shù)名稱和值。
????????url和參數(shù)之間用"?"隔開多個參數(shù)之間用"&"符號連接郑气。
????URL地址傳遞參數(shù)的幾個特點：
優(yōu)點：
????????1. URL地址法簡潔易用幅垮，可同時傳遞多個字符型參數(shù)；
????????2. URL地址法可以很方便的在頁面之間切換并傳遞參數(shù)尾组，無需額外的處理忙芒，基于正常情況比較不會性能損失；
缺點：
????????3. URL傳遞參數(shù)長度受限讳侨，最大為2K呵萨；
????????4. URL只能傳遞字符型參數(shù)，傳遞中文時跨跨，由于發(fā)送頁面和接收頁面的字符編碼方式不一樣而導致參數(shù)解析處理錯誤潮峦，參數(shù)包含中文時可能出現(xiàn)亂碼或者參數(shù)接收錯誤；
????????5. 信息泄露：URL地址在客戶端可見，所以涉及隱私的參數(shù)需進行加密后才能進行傳遞跑杭，不加密傳輸會導致信息泄露铆帽，產(chǎn)生安全隱患咆耿。
5.參考文獻
參考一：
參考二：
參考三：
「每日一題」cookie德谅、session、localStorage分別是什么萨螺？有什么作用窄做？
參考四：
Web頁面通過URL地址傳遞參數(shù)常見問題及檢測方法
鳴謝
感謝大家觀看
分享人:劉洪利
IT修真院上海Web第1期學員劉洪利: 邀請碼14898047
