HTML页面传值的两种方法
- 首先，大家需要明白的是，一般情况下我们进行页面间的传值（即页面间数据的共享或交换）时，都是和后台一起的。
- 当然前台也是可以在不同的页面之间进行传值的，不过在前台直接操作传值的这种方法并不建议，除非是特殊要求，不然还是建议和后台交互。
- 我要介绍的这两种方法都非常简单，基本上有前端基础的人一看就明白。
开始前的准备：
- 我们需要两个页面：
a.html和b.html，这个大家自行创建。 - 还有两个关于jQuery的文件：
jquery-3.3.1.min.js和jquery.params.js
这个
jquery.params.js是第二种方法要用的。如果没有这个文件可以利用我提供的地址下载，也可以自行百度下载。
如果没有
jquery-3.3.1.min.js，那就利用我提供的地址，直接去下载就行。
下载地址：
jquery.params.js-2.1.7版本下载【内附jquery-3.31.min.js以及下面第二种方法讲解的源码】
没了，就这么多。
一：通过URL传输之字符串切割
这种传输方法，顾名思义，就是通过URL地址来达到不同页面间的值的传输的目的。·
话不多说，直接上代码（a.html）：
<body>
<input type="text">
<button>点击此处跳转传值</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("button").click(function () {
var num = $("input").val();
window.location.href = "b.html?num=" + num;
})
</script>
</body>
-
这一段代码，其实也就没多少行代码，但是就这几行代码就可以实现传值。
-
主要就是通过对
URL的操作，通过"b.html?num=" + num来把写入文本框的值拼接到地址上。 -
我在文本框中写——“这是传输的值”，然后点击按钮。
此时，我们跳转到b页面，地址如图所示:
那么此时，我们任务就很简单了，只需对URL进行一番操作即可，我们看b.html页面的代码：
<body>
<script src="jquery-3.3.1.min.js"></script>
<script>
var url = decodeURI(window.location.href).split('=');
alert(url[1]);
</script>
</body>
这个我就重点解释一下：
decodeURI()，这个函数的作用就是解码，大家都知道，URL地址都是经过编码的，【URL地址编码感兴趣的可以了解下】，直接获取编码的话，会造成中文乱码，所以采用decodeURI()函数进行解码，这样就不会出现乱码。
至于字符串的剪切，我想大家应该都懂。jquery字符串切割
二：通过URL传输之直接获取
有了第一种方法的解释，我想大家应该心里都有谱了，这第二种方法通过jquery.params.js，连字符切割都省了，可以直接进行获取。
直接上代码：(a.html不变，改变b.html)
<body>
<script src="jquery-3.3.1.min.js"></script>
<!-- 引入对应的文件 -->
<script src="jquery.params.js"></script>
<script>
var num= $.query.get("num");
document.write(num);
</script>
</body>
可以看到，这种方法简直不要太简单，简直是不要太爽，什么操作也不用，直接通过$.query.get("num")获取。
注： 以上两种方法亲测可用。
三：传值扩展
除了这两种方法外，还有其他方法，比如通过操作cookie进行传值，使用window.localStorage等，有兴趣的可以去了解一下。
简单说一下：
- cookie的存储空间为4k，window.localStorage的存储空间为5M
- 使用cookie的话，可以在同源内的的任意网页中访问，存储数据的时间周期可以自由设置 。
- window.localStorage是h5的技术，不是所有浏览器都支持的。
我个人倾向于通过url的方式进行传值。
但是大家也要注意的一点：通过地址传值，对所传值的长度是有限制的。
具体的可以参考URL传值长度限制
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
