静态页之间传值

　　一般做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组方式

静态页之间传值

encodeURI(str)

encodeURIComponent(str)