一般做web开发，如果是前端向服务端传值，那是非常简单的事情。但如果需要在两个纯HTML静态页之间传值，该怎么做呢？做法至少有4种，本文分享其中的2种，这两种都是简单直接的方法，并且顺带再说下一下url编码的小知识点。
一、通过URL传值
这个方法的核心就是通过JavaScript向另外一个页面跳转，在跳转的同时把要传递的参数拼接到URL里；于此同时，在目标页面中，通过JavaScript获取URL中的参数字符串，然后解析这个字符串即可。为了演示这个方法，我们创建2个HTML静态页面，一个是send.html，一个是getParam.html。
send.html页面非常简单，只有一个文本框和一个按钮，要实现的效果是，当点击按钮时，把用户在文本框中输入的用户名和密码传递到getParam.html页面，在浏览器中运行页面如下图：
该页面结构和JavaScript如下：
代码逻辑非常简单，注释已经非常清楚了。这里url的拼写方法，跟前端向服务端get传参的语法是一样的，如果要传递多个参数，每个参数的key=value对之间用&符号隔开就可以了。
再来看getParam.html页面。这个页面负责接收从send.html页面传递过来的key为uname的参数，并且渲染到实现准备好的一个div中。
代码中定义了一个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组方式