You can do it in several ways: cookies, localstorage, as a parameter by URL with js and with the backend language, I do not even tell you anymore.
Example with localstorage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="txtDNI">
<input type="button" value="Enviar" onclick="Enviar()">
</body>
<script>
function Enviar() {
var dni = document.getElementById("txtDNI").value;
console.log(dni);
localStorage.setItem("DNI", dni);
window.location.href = "ejem2.html";
}
</script>
</html>
Up to here you can save the DNI, if we perform the debug we will see how it is stored in localstorage
When the other page is loaded you will only need to invoke element of the localstorage with GetItem and the Id that was provided DNI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload="loadDNI()" >
<input type="text" id="txtGetDNI">
</body>
<script>
var dni = localStorage.getItem("DNI");
function loadDNI () { document.getElementById("txtGetDNI").value = dni; }
</script>
</html>
And you'll already get the item saved in localstorage