亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 localStorage 在頁面之間傳遞變量并在鏈接中傳遞變量

使用 localStorage 在頁面之間傳遞變量并在鏈接中傳遞變量

阿波羅的戰車 2022-11-11 13:13:55
我正在學習 js,最近,我為我的英語和我的問題的明顯性道歉。我有兩個問題,我會很感激純 JavaScript 的解決方案。按照幾個教程,我在 HTML 頁面中安裝了一個 localStorage 腳本。頁面1.html <p> Hello! what's your name?</p> <form action="pag2.html">  <input type="text" id="txt"/>  <input type="submit" value="nome" onClick="passvalues();"/> </form> // the form has a link to pag2.html<script> function passvalues()    {    var nme=document.getElementById("txt").value;    localStorage.setItem("textvalue",nme);    return false;    }</script>假設用戶輸入名稱“Lucy”:pag2.html<p>Hi <span id="result">Lucy<span> nice to meet you!</p>`  // the name appears<p>How are you today <span id="result">NOTHING</span>?</p>` // the name does not appear<a href="pag3.html">pag3</a><script>document.getElementById("result").innerHTML = localStorage.getItem("textvalue"); </script>第一個問題由于我的錯誤,NAME 僅出現一次,還是必須如此?我應該使用另一種語法讓它出現幾次嗎?pag3.html<p><span id="result">Lucy</span>which gender designation do you prefer to be used with you?</p><p><a href="male.html">male</a></p><p><a href="female.html">female</a></p><p><a href="neutral.html">neutral</a></p><script>document.getElementById("result").innerHTML = localStorage.getItem("textvalue"); </script>第二個問題在第 3 頁中,用戶必須選擇他想被稱為男性、女性還是中性。一種解決方案是根據選擇的類型設置三個不同的頁面。但是這種解決方案并不優雅,并且會增加頁數。我似乎在某處讀到,使用 js 可以轉到另一個頁面,同時通過鏈接設置布爾變量的值(真/假)。像這樣的東西(發明了語法):<a href="female.html" set var f true> female</a>這將允許您創建一個插入三個“if”的登錄頁面: if (female true) {    text = "brava";  } else if (male true) {    text= "bravo";  } else {    text = "bene";  }是否有可能做到這一點?如何?我已經多次嘗試過這個腳本htmlgoodies,但對我來說太難了。你好,首先,我要感謝@cssyphus 和@Shahnawazh 的回答。問題 1我設法使用腳本在同一頁面上多次顯示名稱:<script> var result = document.getElementsByClassName('result');[].slice.call(result).forEach(function (className) {            className.innerHTML = localStorage.getItem("textvalue"); }); </script>但是,我真的需要將它包含在需要顯示名稱的所有頁面上嗎?我還嘗試將腳本插入外部 js 頁面,但名稱甚至沒有出現一次。問題2至于第二個問題,我沒有得到肯定的結果。
查看完整描述

2 回答

?
慕勒3428872

TA貢獻1848條經驗 獲得超6個贊

而不是使用id,您可以class用于顯示結果,因為 id 是唯一的。此外,對于存儲男性、女性或中性,您可以使用單選按鈕,當您單擊其中任何一個時,只需將結果保存在localStorage. 這是三頁。


page1.html

<body>

    <p> Hello! what's your name?</p>


    <form action="page2.html">

        <input type="text" id="txt" />

        <input type="submit" value="name" onClick="passvalues();" />

    </form>


    <script>

        function passvalues() {

            var nme = document.getElementById("txt").value;

            localStorage.setItem("textvalue", nme);

            return false;

        }

    </script>


</body>

page2.html

<body>

    enter code here

    <p>Hi <span class="result">Lucy<span> nice to meet you!</p>


    <p>How are you today <span class="result"></span>?</p>


    <a href="page3.html">page3</a>


    <script>


        var result = document.getElementsByClassName('result');


        [].slice.call(result).forEach(function (className) {

            className.innerHTML = localStorage.getItem("textvalue");

        });


    </script>

</body>

page3.html

<body>

    <p><span class="result"></span> which gender designation do you prefer to be used with you?</p>


    <form name="genderForm" action="">

        <input type="radio" name="gender" value="male"> Male<br>

        <input type="radio" name="gender" value="female"> Female<br>

        <input type="radio" name="gender" value="neutral"> Neutral

    </form>


    <p>You've selected <span class="selectedGender"></span></p>


    <script>

        var result = document.getElementsByClassName('result');


        [].slice.call(result).forEach(function (className) {

            className.innerHTML = localStorage.getItem("textvalue");

        });


        var rad = document.genderForm.gender;

        var prev = null;

        for (var i = 0; i < rad.length; i++) {

            rad[i].addEventListener('change', function () {

                (prev) ? console.log(prev.value) : null;

                if (this !== prev) {

                    prev = this;

                }

                console.log(this.value);

                document.getElementsByClassName("selectedGender")[0].innerHTML = this.value;

                localStorage.setItem("gender", this.value);

            });

        }

    </script>

</body>


查看完整回答
反對 回復 2022-11-11
?
九州編程

TA貢獻1785條經驗 獲得超4個贊

您剛剛發現了為什么同一頁面上不能有兩個具有相同 ID 的元素 - 只有第一個可以工作。但是,類的工作方式幾乎與 ID完全相同,因此只需className在兩個位置使用相同的 ID:


<p>Hi <span class="result">Lucy<span> ...

...

<p>How are you today <span class="result">Lucy</span> ...

至于您的第二個問題,只需再次使用 localStorage 即可。設置一個不同的 localStorage 變量并讀/寫它。


但是,您可能想到的是使用查詢字符串,如下所示:


<a href="person.html?gender=f">female</a>

有關信息和代碼示例,請參閱此 SO 問題。


查看完整回答
反對 回復 2022-11-11
  • 2 回答
  • 0 關注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號