将表单输入存储为局部变量并在另一个网页中使用

Posted 2023-03-21

【中文标题】将表单输入存储为局部变量并在另一个网页中使用

【英文标题】：Storing form input as local variable and using in another webpage

【发布时间】：2021-06-03 15:38:05

【问题描述】：

我正在尝试存储来自表单的用户输入，然后在不同的页面上使用该变量。

看起来应该很简单，但我完全没有得到任何回报，我不知道为什么。

第 1 页上的代码：

<div class="container-fluid d-flex justify-content-center" id="mySearchBar">

        <div class="row d-flex justify-content-center ">


            <h3 class="heading text-center pt-5">Search the Title Below and Find The Site It's Hosted On!</h3>

            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search this blog" id="searchbar" name="searchbar ">
               <script> localStorage.setItem('loan', document.getElementById("searchbar").value );</script>
                <div class="input-group-append">
                    <button class="btn btn-secondary" id='searchButton' type="submit">
                    <i class="fa fa-search"></i>
                  </button>
                </div>

            </div>

然后在第二页我有以下内容：

<script>
           var loan = localStorage.getItem('searchbar');
           console.log(loan);
           </script>

任何帮助将不胜感激！

【问题讨论】：

这一行？

这应该在按钮点击的事件监听器中

您在页面加载时设置值，而输入仍然有空值。您还设置了项目'loan' 并尝试获取项目'searchbar'

@ArleighHix 哦，是的，我明白了，应该明白这一点。您能否举例说明它在事件侦听器中的含义？

【参考方案1】：

为了获取用户输入的值，您必须在用户输入值之后这样做。您需要使用事件侦听器来获取和存储值。对于您的用例，最好将您的输入包装在 <form> 中并监听表单提交。这样您就可以捕获提交按钮的点击和/或输入的回车按键。

您使用的是 bootstrap-4，所以我假设您也导入了 jQuery。

<form class="container-fluid d-flex justify-content-center" id="mySearchBar">
  <div class="row d-flex justify-content-center ">
    <h3 class="heading text-center pt-5">Search the Title Below and Find The Site It's Hosted On!</h3>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search this blog" id="searchbar" name="searchbar">
      <div class="input-group-append">
        <button class="btn btn-secondary" id='searchButton' type="submit">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </div>
</form>

<script>
  // use a constant key string on both pages
  const searchbar_local_storage_key = 'my_unique_key_for_searchbar_value'

  // on page where you need to fetch stored value
  $(document).ready(function() 
    let stored_value = localStorage.getItem(searchbar_local_storage_key)
    console.log('searchbar localStorage value at document.ready:')
    console.log(stored_value)
  )

  // on page where you need store/overwrite the value
  $(document).ready(function() 
    let $searchbar = $('#searchbar')
    console.log('searchbar input value at document.ready:')
    console.log($searchbar.val())

    $('#mySearchBar').on('submit', function(event) 
      console.log('searchbar form submitted')
      // stop form submission if needed
      event.preventDefault()
      
      // get the current value
      let term = $searchbar.val()
      console.log('searchbar input value at form.submit:')
      console.log($searchbar.val())

      // store values
      localStorage.setItem(searchbar_local_storage_key, $searchbar.val());
      console.log('new searchbar value in localStorage:')
      console.log(localStorage.getItem(searchbar_local_storage_key))

    )
  )
  
</script>

在此处查看实际操作https://jsfiddle.net/chan_omega/qt510oms/ 输入一个值，提交，在控制台中查看输出，然后重新加载页面（模拟在不同的页面上）。您将看到从 localStorage 加载的相同值。

【讨论】：

您能解释一下为什么需要常量键字符串吗？谢谢

为了保持一致性，确保它是唯一的，并确保你不会输入错误（大多数编辑器都有自动完成功能，可以填写变量名，但他们不会猜测字符串值）

哦，我用const 声明它以确保该值未更改。