在文件之间传递 JavaScript 变量

Question

I have successfully taken input data from a form and output it as console.log('input') in setting.html.我已成功从表单中获取输入数据，并将 output 作为 console.log('input') 在 setting.html 中。 But how do I send this variable to another file called index.html?但是如何将此变量发送到另一个名为 index.html 的文件？ Here is setting.html这里是设置。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和 index.html 是

<!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>

Thanks,谢谢，

Answer 1

in settings capture your submit button's click and set a localStorage item value to the user input.在设置中捕获提交按钮的单击并将 localStorage 项目值设置为用户输入。 Then redirect the user to the index.html file然后将用户重定向到 index.html 文件

    <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.然后在 index.html 中，您可以访问该变量，如下所示。 The || || "" says if userinput doesn't exist in localStorage, use "" as the default value; ""表示如果 localStorage 中不存在 userinput，则使用 "" 作为默认值；

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

Answer 2

There are some ways through which this can be achieved.有一些方法可以实现这一点。

Using localStorage is one option.使用 localStorage 是一种选择。 You can use the setItem and getItem functions in the settings.html and index.html respectively to get the value like so (on a high level):您可以分别使用 settings.html 和 index.html 中的 setItem 和 getItem 函数来获取如下值（在高级别上）：

localStorage["key"] = value;

... in another page ...
value = localStorage["key"];

jQuery load function. jQuery 加载 function。 You can look into its documentation - pretty simple.您可以查看它的文档 - 非常简单。
Through URI encoding as follows:通过URI编码如下：

In the file from where you want to send:在您要发送的文件中：

var b = document.getElementById('name').value,
        url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);

    document.location.href = url;

And in the file where you want to receive:在您要接收的文件中：

var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }

All three options could be extended to work with multiple variables as well!所有三个选项都可以扩展为使用多个变量！

Hope it helps!希望能帮助到你！

在文件之间传递 JavaScript 变量

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-08-18 21:21:38

解决方案2
0 2022-08-18 21:13:56

在文件之间传递 JavaScript 变量

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-08-18 21:21:38

解决方案2 0 2022-08-18 21:13:56

解决方案1
1 已采纳 2022-08-18 21:21:38

解决方案2
0 2022-08-18 21:13:56