两个html页面之间传递数据的方法

, ,

一. 不借助后端，完全由前端完成

1、get方式，url携带参数

实例：

1
b.html?id=1

跳转到b.html后，通过以下的js方法获取get请求的参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function get_params(params) {
    var url = location.href;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = { };
    for (i = 0; j = paraString[i]; i++) {
        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[params.toLowerCase()];
    if (typeof (returnValue) == "undefined") {
        return "";
    } else {
        return returnValue;
    }
}

在js代码块执行下面代码拿到之前的html通过get请求传递的参数：

1
var id=get_params("id")

当然这种传递一些比较小而且不需要考虑数据安全的可以这样子用，在用户登录提交username和password这种就不行了，因为非常不安全，而且get请求数据还是有长度限制的。

2、通过cookie，传递

cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。

先定义几个js方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//写cookies

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}
//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
function setCookie(name,value,time)
{
    var exp = new Date();
    exp.setTime(exp.getTime() + time*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

举个例子，我要给a.html跳转到b.html，并携带一个数据name=“小明”，a.html里js代码块在跳转到b.html之前先执行：

1
setCookie("name","小明",20);//20意思是cookie有效期为20分钟

在b.html的js代码块里执行：

1
2
var name=getCookie("name")//先获取值
delCookie("name");//删除该cookie

但是我们要传递账号和密码的时候这种也不安全。

3、window.open和window.opener之间传值

window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。

a.html

1
2
3
4
5
6
<button id="open">打开新的页面</button>
<script>
    $('#open').click(function () {
        window.open('./b.html')
    })
</script>

b.html

1
2
3
4
<script>
    var content = window.opener.document.getElementById("open").innerHTML;
    alert(content);
</script>

4、h5技术，window.localStorage存储数据

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。此方法类似cookie，将数据存在一个公共的地方，实现页面之间传值。但是我不喜欢用这个，因为localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信

保存数据语法：

1
localStorage.setItem("key", "value");

读取数据语法：

1
var lastname = localStorage.getItem("key");

删除数据语法：

1
localStorage.removeItem("key");

*5、h5技术，window.sessionStorage存储数据*

相比localStorage，我更喜欢sessionStorage，因为sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。我一般用它来实现两html之间的json数据传递，当然前提是这个json数据不是什么要保密的数据（账号和密码这种不推荐这种方法存储）

打个比方，就说我a.html请求接口获取过一次数据，但是发现跳转到b.html，我也需要再请求一次接口拿到a之前请求的数据我才能执行下面的操作，是不是就有点重复，当然，这里的数据肯定不是像账号和密码那种非常需要安全警惕的，这时候就可以考虑用sessionStorage。举个例子，在a.html跳转到b.

html是执行以下js代码：

1
2
3
var json;//你的json数据

sessionStorage.setItem("allJson", JSON.stringify(json));

在b.html的js代码块里执行：

1
2
var json= JSON.parse(sessionStorage.getItem("allJson"));//从sessionStorage里取出json数据
sessionStorage.clear();//清空sessionStorage

二. 借助后端，由前端的Cookie结合后端的session完成

这种情况一般用来记住登录状态，一般用来跳转界面之后不暴露用户和密码都能识别你是哪个用户。一般的思路是：服务器端session保留之前提交的用户对象，并给客户端的Cookie塞一个key，然后客户端每次操作后端都通过这个前端Cookie里提交的key从服务器的session里取出对应的User，然后执行操作，很多时候为了避免Cookie被窃取，每次操作的时候都会更改前端Cookie的key值，并将User对象存到新的session里，当然新的session的key对应的前端新更新的key，并删除之前无效的key对应的session。具体可以看这位博主的文章，就不多介绍了。

https://blog.csdn.net/a754895/article/details/82632747

🔰本文标题： 两个html页面之间传递数据的方法

🔞本文链接： https://193.gs/htmltohtml/index.html

🌡️本文总热度℃