將所選數據從一頁傳遞到html中的另一頁

Question

我正在使用表單將數據從一頁傳遞到另一頁。如果單擊“應用”按鈕將轉到另一頁，我想在下一頁顯示職業的相應標題（即Java Developer）。在javascript的幫助下實現這一目標。

career.html：

    <form action="job portal.html" method="get" target="_blank">
                    <div class="section-header text-center wow zoomIn">
                        <h2>Current Oppournities</h2>

                    </div><br /><br />

                    <div class="row">


                        <div class="col-lg-6">
                            <div class="box wow fadeInLeft">

                                <h4 class="title" id="career-title" name="career-title"><a href=""><i class="fa fa-java"></i>&nbsp;<b>Java Developer</b></a></h4>
                                <hr />
                                <div class="carrer-opt">
                                    <h5 name="test">Software Developer</h5>

                                    <p>

                                        Should have join immediate joiner .
                                    </p>

                                </div>
                                <div class="col-lg-3 cta-btn-container">
                                    <input type="submit" id="apply"  value="Apply Now" onClick="testJS()" />
                                </div>
                            </div>
                        </div>

</form>

JS：

<script src="js/main.js"></script>
    <script>
        function testJS() {
            var b = document.getElementById('career-title').value,
                url = 'job portal.html?career-title=' + encodeURIComponent(b);

            document.location.href = url;
        }
    </script>

工作portal.html：

 <h1 id="here" style="color:black"></h1>

JS：

  <script>
        window.onload = function () {
            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];
            }
            document.getElementById('here').innerHTML = data.career-title;
        }
    </script>

如何做到這一點。請任何人幫助。

Answer 1

您需要使用HTML5本地存儲解決此類問題。 這是您的問題的解決方案。

<script>
    function testJS() {
        var b = document.getElementById('career-title').value;
        var titleText = localStorage.setItem('title', b);
        var url = 'job portal.html';

        document.location.href = url;
    }
</script>

設置標題值后，通過在prtal.html腳本中引用id“ title”來獲取值並為該元素設置值。

<script>
    window.onload = function () {
        var valueText = localStorage.getItem('title');
        document.getElementById('here').innerHTML = valueText;
    }
</script>