landocss Ответов: 1

Сохранить пользовательский ввод на странице после ее перезагрузки?

Я использовал HTML и JavaScript, чтобы позволить пользователю ввести текст, а затем нажать кнопку Отправить. Когда пользователь нажимает кнопку отправить, его текст отображается на странице. Проблема в том, что при перезагрузке страницы текст исчезает. Очевидно. Вот код, который у меня есть:

Что я уже пробовал:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 
</head>
<body>
<p id="printhere"></p>
        <TEXTAREA Name="content" ROWS="5" COLS="20" id = "userInput"></TEXTAREA>

        <button  onclick="display()">post</button>
        
        		 
<script>function display(){


	var post = document.getElementById("userInput").value;

document.getElementById("printhere").innerHTML = post;
}</script>		 
		 


       
</body>
</html>

Есть ли в любом случае сделать так, чтобы входные данные оставались после перезагрузки страницы?

F-ES Sitecore

Когда вы обновляете innerHTML, сохраните переменную "post" в файле cookie или в локальном хранилище. Когда страница загружается, проверьте, существует ли файл cookie\local storage, и если да, то заполните тег "printhere" содержимым.

landocss

Я вроде как новичок в этом деле. Как мне сделать печенье?

F-ES Sitecore

https://www.w3schools.com/js/js_cookies.asp

landocss

Он говорит, что я могу: var post = document.cookie; но как бы вы добавили это к чему-то, что имеет getElementById. Как я уже сказал, Я новичок в этом деле.

F-ES Sitecore

Используйте функции setCookie и getCookie на этой странице. Вам нужно выбрать имя для передачи данных и установить его с помощью setCookie("MyName", post, 1)

Извлечь его

var post = getCookie("MyName");

затем установите innerHTML в положение "post", Как вы уже делаете.

landocss

Я попробую это сделать.

landocss

Благодарю вас так много для этого. Но я все еще немного сбит с толку.Что такое "1" после "поста,." JavaScript читает строку за строкой, верно? Извините за доставленные неудобства. Я новичок в JavaScript.

F-ES Sitecore

"1" - это сколько дней до истечения срока действия файла cookie, вы можете изменить его на то, что считаете необходимым.

landocss

Почему бы тебе просто не показать мне, что нужно было поставить код. Я так запуталась.

1 Ответов

Рейтинг:
6

F-ES Sitecore

Обновите свой сценарий, как показано ниже. Обратите внимание на мой комментарий о том, что функция отображения возвращает false, читая между строк, что может быть тем, что вам действительно нужно, а не утруждая себя хранением данных в файле cookie. Ваша кнопка будет выглядеть так

<button onclick="return display();">post</button>


JS

<script>
    // get the value from the cookie
    var post = getCookie("userInput");

    // check a value has been stored
    if (post !== '') {
        // if it has update the "p" tag
        document.getElementById("printhere").innerHTML = post;
    }

    function display() {
	    var post = document.getElementById("userInput").value;
        document.getElementById("printhere").innerHTML = post;

        // store the input in a cookie
        setCookie("userInput", post, 1);

        // if you don't want the page to refresh after the button is pressed then
        // have this function return false.  Also make sure you have "return" in
        // the onclick attribute of the button
        //return false;
    }

    function setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+ d.toUTCString();
      document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
      var name = cname + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
          c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }

</script>

landocss

Спасибо. Это было полезно.