Passing JavaScript variables between files

I have successfully taken input data from a form and output it as console.log('input') in setting.html. But how do I send this variable to another file called index.html?

Here is setting.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>settings></title>
  </head>
  <body>
    <form action=index.html>
    <input id="userinput" type="text">
    <button onclick="myfunction()">Click me</button>
    </form>
  </body>
  <script>
    var theinput='';
    function myfunction() {
    theinput=document.getElementById("userinput").value;
  console.log(theinput);
    }
  </script>
</html>

and index.html is

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="settings.html"></script>
  </head>
  <body>
<a href="setting.html">settings</a>

    <button onclick="theFunction()">generate pdf</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
input=document
function theFunction() {
var num = 'this is....';
console.log(num);
  const pdf = new jsPDF();
  pdf.text(num,10,10);
  pdf.save('a4.pdf');
}
</script>
</html>

Updated

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
<a href="setting.html">settings</a>

    <button onclick="theFunction()">generate pdf</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
input=document
function theFunction() {
var num = 'this is....';
console.log(num);
  const pdf = new jsPDF();
  pdf.text(num,10,10);
  pdf.save('a4.pdf');
  //document.getElementById("demo").innerHTML = "Hello World";
}
   let userInput = localStorage.getItem("userinput") || "";
   console.log(userInput);
</script>
</html>

setting.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>settings></title>
  </head>
  <body>
    <h1>Settings</h1>
    <form>
            <input id="userinput" name="input" type="text">
            <button type="button" class="btn-submit">Submit</button>
        </form>

    <script>
    let btn = document.querySelector(".btn-submit")
    let userinput = document.querySelector("#userinput")
    btn.addEventListener("click",function(){
      localStorage.setItem("userinput",userinput.value)
      location.href = "index.html";
    });
    </script>
    </body>
    </html>

Solution

in settings capture your submit button's click and set a localStorage item value to the user input. Then redirect the user to the index.html file

    <form>
        <input id="userinput" name="input" type="text">
        <button type="button" class="btn-submit">Submit</button>
    </form>

<script>
let btn = document.querySelector(".btn-submit") 
let userinput = document.querySelector("#userinput") 
btn.addEventListener("click",function(){
  localStorage.setItem("userinput",userinput.value)
  location.href = "index.html";
});
</script>

Then in index.html you can access that variable like below. The || "" says if userinput doesn't exist in localStorage, use "" as the default value;

<script>
   let userInput = localStorage.getItem("userinput") || "";
</script>