Передача переменных между страницами с использованием localStorage и передача переменных в ссылке - PullRequest
Новая
       1

Передача переменных между страницами с использованием localStorage и передача переменных в ссылке

2 голосов
/ 11 июля 2020

Я учусь js, в последнее время прошу прощения за мой английский sh и за очевидность моих вопросов. У меня две проблемы, я был бы признателен за решения в чистом виде JavaScript.

После нескольких руководств я установил сценарий localStorage на странице HTML.

pag1. 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>

Допустим, пользователь вводит имя «Люси»:

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>

Первый вопрос

ИМЯ появляется только один раз за мою ошибку или должно быть так? Должен ли я использовать другой синтаксис, чтобы он отображался несколько раз?

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 можно go перейти на другую страницу и в то же время установить значение a Логическая переменная (true / false) через ссылку.

Примерно так (синтаксис придуман): 

<a href="female.html" set var f true> female</a>

Это позволит вам создать одну целевую страницу со вставкой три "если": 

 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 ]

1 голос
/ 11 июля 2020

Вместо использования id вы можете использовать class для отображения результата, потому что идентификатор уникален. Также для сохранения мужского, женского или нейтрального пола вы можете использовать переключатели, и когда вы нажимаете любую из них, просто сохраняйте результат в 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>
0 голосов
/ 11 июля 2020

Вы только что обнаружили, почему у вас не может быть двух элементов на одной странице с одним и тем же идентификатором - будет работать только первый. Однако классы работают почти точно как идентификаторы, поэтому просто используйте одинаковые className в обоих местах: 

<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 для информации и примеров кода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...