靜態頁之間傳值
一般做web開發，如果是前端向服務端傳值，那是非常簡單的事情。但如果需要在兩個純HTML靜態頁之間傳值，該怎麼做呢？做法至少有4種，本文分享其中的2種，這兩種都是簡單直接的方法，並且順帶再說下一下url編碼的小知識點。
一、通過URL傳值
這個方法的核心就是通過JavaScript向另外一個頁面跳轉，在跳轉的同時把要傳遞的引數拼接到URL裡；於此同時，在目標頁面中，通過JavaScript獲取URL中的引數字串，然後解析這個字串即可。為了演示這個方法，我們建立2個HTML靜態頁面，一個是send.html，一個是getParam.html。
send.html頁面非常簡單，只有一個文字框和一個按鈕，要實現的效果是，當點選按鈕時，把使用者在文字框中輸入的使用者名稱和密碼傳遞到getParam.html頁面，在瀏覽器中執行頁面如下圖：
該頁面結構和JavaScript如下：
<body> <input type="text" value="" id="username"> <input type="text" value="" id="pwd"> <input type="button" value="提交" id="btn"> <script> var btn = document.getElementById('btn'); btn.onclick = function() {//註冊點選事件 var uName = document.getElementById('username').value;//獲取輸入的使用者名稱 var pwd = document.getElementById('pwd').value; uName = encodeURI(uName);//把使用者名稱字串進行URL編碼 var url = 'get.html?uname' + '=' + uName + '&pwd=' + pwd;//把要傳遞的引數拼接入URL字串中 window.location.href= url;//跳轉 } </script> </body>
程式碼邏輯非常簡單，註釋已經非常清楚了。這裡url的拼寫方法，跟前端向服務端get傳參的語法是一樣的，如果要傳遞多個引數，每個引數的key=value對之間用&符號隔開就可以了。
再來看getParam.html頁面。這個頁面負責接收從send.html頁面傳遞過來的key為uname的引數，並且渲染到實現準備好的一個div中。
<body> <div id="box"></div> <script> // var url = window.location.href;//獲取完整的url var url = window.location.search;//只獲取引數部分，帶有？號 var box = document.getElementById('box'); var psObj = getParams(url); var str = ''; for (var key in psObj) { str += key + ' : ' + psObj[key] + '<br/>'; } box.innerHTML = str; function getParams(searchUrl){ var index = searchUrl.indexOf('?'); if(index == -1){ return; } searchUrl = searchUrl.substr(index + 1); var obj = new Object(); var params = searchUrl.split('&'); for(var i = 0; i < params.length; i++){ var item = params[i].split('='); obj[item[0]] = decodeURI(item[1]); } return obj; } </script> </body>
程式碼中定義了一個getParams()函式，該函式的作用就是從url中切割出傳遞過來的引數，並且把這些引數封裝成一個js字面量物件返回過來。
getParam.html頁面執行結果如下圖：
二、使用H5新增的localStorage傳值
localStorage就像一個微型的本地資料庫，用這個東西記錄下來一些資料，是永久儲存在客戶端的，不管是哪個頁面都能獲取到。程式碼就不貼出來了，這個很簡單，思路說出來就夠了。與之相似的，還可以用cookie，不過cookie就麻煩一點，而且儲存資料量相比localStorage很有限。
三、URL編碼
這裡不想說的過於複雜。簡單點說，URL是用來描述客戶端發出的HTTP請求資源的地址，以及在發出此次HTTP請求時附帶的引數。URL傳遞的引數是以：key1=value1&key2=value2。。。這種形式來傳遞的，這些引數在傳遞時，會被瀏覽器通過ASCII字符集進行編碼，編碼的結果就是變成二進位制流。然後才會傳遞到服務端，服務端再反編譯回來，才能看到原始的字串。
問題就出在編碼身上，ASCII字符集是一個很小的字符集，它不支援漢字。所以如果你要傳遞的引數中有超出ASCII字符集的字元，就必須先通過URL編碼，然後再來使用。比如我們要傳遞的使用者名稱，如果出現漢字，我們就應該先使用URL編碼轉換下，然後再傳輸這個引數。
同樣道理，雖然是靜態頁面傳值，瀏覽器也會對URL裡的引數進行編碼，同樣以ASCII字符集進行編碼。所以也同樣面臨一個URL編碼的問題。
接下來就是URL編碼如何實現的問題了。
在JavaScript中，提供了3種編碼和解碼的方式。分別是
| 序號 | 編碼 | 解碼 |
| 1 | escape(str) | unescape(str) |
| 2 | encodeURI(str) |
decodeURI(str) |
| 3 | encodeURIComponent(str) |
decodeURIComponent (str) |
需要說明的是：
- 必須搭配使用，比如編碼時使用了escape()，那麼解碼時必須使用unescape()，否則就會解碼失敗。
- 第1組的api是js提供的最早的URL編碼方式，已經不推薦使用。推薦的是後2種方式
- 本案例使用的是第2組方式