Question

我有两个html文件fileA.html和fileB.html，分别与两个javascript文件fileA.js和fileB.js相关联

在第一个html文件（fileA.html）上，我具有具有相同className和differents值的differents链接，例如三个firsts链接：

<a real="external" href="fileB.html" class="links"> value 1</a>
<a real="external" href="fileB.html" class="links"> value 2</a>
<a real="external" href="fileB.html" class="links"> value 3</a>

如您所见，“ href”标记重定向到第二个html文件fileB.html

在文件fileB.html上，我有一个文本输入表单，该表单允许用户通过输入上一个html文件中存在的值之一（例如值2）来访问该值的统计信息（我简化了问题，但实际上这些值是指基因名称）

我希望当用户单击链接之一（即值之一）时，该值成为表单输入值的默认值

我在所有链接上都添加了一个onclick事件，以检索链接的值（userValue = .textContent）

在fileB上，我知道我必须通过执行以下操作来更改默认值：

form = document.getElementById('formulaire');

formulaire.value = userValue;

问题是，我不知道如何检索文件A（当我们单击链接时生成）到第二个文件的变量

也许在javascript中是不可能的。

先谢谢了

Answer 1

您可以通过使用localStorage来实现此目的，即单击文件中的链接或单击写功能，然后将被单击的值从那里存储到本地存储，然后从第二页从本地存储中检索此存储的值。您可以使用以下本地存储的set get方法

localStorage.setItem("myVal", "val1");
var val = localStorage.getItem("myVal");

Answer 2

有两种方法可以做到这一点。您可以将查询或哈希附加到链接的href。甚至走得更远，然后使用localStorage或sessionStorage。但是，我不建议这样做，因为该值对于localStorage是永久的，而且对于这两者来说，目前尚不清楚。

带哈希的解决方案：

<a real="external" href="fileB.html#value=1" class="links">value 1</a>
<a real="external" href="fileB.html#value=2" class="links">value 2</a>
<a real="external" href="fileB.html#value=3" class="links">value 3</a>

然后在fileB.html上，您可以检查是否存在哈希变量，然后选择该给定值。

const ALLOWED_FIELDS = ['value'];

function selectGivenValue() {
  const hash = location.hash.substring(1);
  
  // This allows for multiple values to be passed
  hash.split('&').forEach(entity => {
    const [name, value] = entity.split('=', 2);
    
    // Check if field can be set
    if (ALLOWED_FIELDS.indexOf(name) === -1) {
      return;
    }
    
    // Set all fields with the attribute name
    document.querySelectorAll(`[name=${name}]`).forEach(field => {
      field.value = value;
    });
  });
}
// Run the function as soon as possible
selectGivenValue();

<select name="value">
  <option value="">Please select value</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
</select>

<p><strong><a href="#value=1" onclick="setTimeout(selectGivenValue,100)">This link is just here to set the hash variable.</a></strong></p>

使用JavaScript将变量从一个脚本检索到另一个脚本

2 个答案: