Javascript 使用JQuery在两个html文件中使用同一js文件中的变量_Javascript_Jquery_Html

Javascript 使用JQuery在两个html文件中使用同一js文件中的变量

javascript jquery html

Javascript 使用JQuery在两个html文件中使用同一js文件中的变量,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试获取已保存的变量，以显示在另一页上创建的表上。我从一个表单中从用户那里获取信息，并有一个按钮，单击该按钮并触发，以将值保存到变量中。我的问题是，我无法使用保存的变量更改另一个页面上的内部html。我使用1个js文件和2个html文件。我只能使用js/jquery、html和css。这是我的密码： loanpage.html <!DOCTYPE html> <html lang="en-us"> <head> <meta charset=

我正在尝试获取已保存的变量，以显示在另一页上创建的表上。我从一个表单中从用户那里获取信息，并有一个按钮，单击该按钮并触发，以将值保存到变量中。我的问题是，我无法使用保存的变量更改另一个页面上的内部html。我使用1个js文件和2个html文件。我只能使用js/jquery、html和css。这是我的密码：

loanpage.html

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Super Awesome Loan Guys</title>
    <link rel="stylesheet" type="text/css" href="loanpage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
    <div class="bg" id="text-center">
        <div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div>
        <div>
            <form action="infopage.html">
                <h4>Loan Amount:</h4>
                <input type="text" id="loanamount" name="loanamount"><br>
                <input type="radio" id="12month" name="time">12 Months
                <input type="radio" id="18month" name="time">18 Months
                <input type="radio" id="24month" name="time">24 Months
                <h4>Name:</h4><input id="namefield" type="text" name="firstlastname">
                <h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber">
                <h4>Email:</h4><input id="emailfield" type="text" name="email">
                <h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br>
            </form>
            <a href="infopage.html"><button type="button">Submit</button></a>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Super Awesome Loan Guys Loan Information</title>
    <link rel="stylesheet" type="text/css" href="loanpage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="loanpage.js"></script>
</head>

<body>
    <div class="bg" id="text-center">
        <h1>Here is the info you submitted!</h1>
        <table>
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
                <th>Email Address</th>
                <th>Zip Code</th>
                <th>Loan Amount</th>
                <th>Loan Duration</th>
                <th>Interest</th>
            </tr>
            <tr>
                <td id="displayName">1</td>
                <td id="displayPhone">1</td>
                <td id="displayEmail">1</td>
                <td id="displayZip">1</td>
                <td id="displayAmount">1</td>
                <td id="displayDuration">1</td>
                <td id="displayInterest">1</td>
            </tr>
        </table>
    </div>
</body>
</html>

}))

本地存储是您的最佳选择

// Save data to the current local store
localStorage.setItem("username", "John");

// Access some stored data
alert( "username = " + localStorage.getItem("username"));

页面是否同时打开？默认情况下，Javascript没有设置状态，因此在一个页面上设置的变量在另一个页面中不可用，除非通过GET或POST变量、localStorage或在同一浏览器中同时打开两个页面，将变量传输到该页面（或通过iframe或ajax加载第二页）.您最好的解决方案是使用localStorage@Jersh我不这么认为。我应该点击提交按钮，进入信息页面，我需要访问js文件中的那些变量，以更改信息页面的内部html，如前所述，查看localStorage。注意浏览器支持。查看后，我不确定如何o真正使用它，c9说localStorage是未定义的。我在JSFIDLE中尝试了该代码，效果很好。检查您的浏览器兼容性？还有，您的代码是什么样子的？

// Save data to the current local store
localStorage.setItem("username", "John");

// Access some stored data
alert( "username = " + localStorage.getItem("username"));