Одностраничный сайт на html

#html

Скажите, пожалуйста.
Сделал на сайте две формы для имени и адреса. И кнопку сабмит.

Вопрос 1. Как сделать так, чтобы при нажатии кнопки имя и фамилия сохранялись на
этой же странице?

Вопрос 2: Можно ли сделать так, чтобы все данные на странице очищались в определенное
время?
    

Ответы

Ответ 1

Данные можно сохранить на странице при помощи JS, но они в любой момент они могут
быть утеряны, да и видеть их будет только человек добавивший их.(т.к. сохранены они
на клиентской стороне, браузере пользователя)
Чтобы сохранять и выводить необходимые Вам данные, вам нужна серверная сторона.

Т.е.
Клиент <=> HTML страница <=> Сервер

Нужно чтобы при клике на кнопку, данные отправлялись на сервер, после чего там обрабатывались
и сохранялись. В последующем Вы сможете делать с этими данными все что только захотите.
Но средствами HTML этого не добиться.


Ответ 2

Ну а вот простенькая реализация на js, так как думаю, что автор не о сервере речь вел.



var message;

function letsdoit() {
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
message = document.getElementById('welcomemess');
var ticks = document.getElementById('ticks').value;
message.innerHTML = "Привет, " + fname.value + " " + lname.value;
setTimeout(ticktock, 1000*ticks);
}

function ticktock() {
message.innerHTML='';
}









А вообще, да, конечно сервак

UPD: Добавил очищение данных спустя заданное количество секунд


Ответ 3

Можно хранить заполненные данные в браузере посетителя. Разумеется, они будут видны
только ему. Другие посетители страницы будут иметь дело каждый со своими данными. Иначе
нужен общий сервер.

Пример использует localStorage и сохраняет заполненные данные, даже если браузер
закрыть. В песочнице SO не работает, вот работающая копия на jsFiddle.



var people = []
  ,saved = localStorage.getItem("people")
  ,in_name = document.getElementById('in-name')
  ,in_addr = document.getElementById('in-addr')
;

if( saved) {
  people = JSON.parse(saved);
  render();
}

document.getElementById('btn-save').addEventListener(
  'click',
  function(){
    people.push({
      name: in_name.value,
      addr: in_addr.value
    });
    localStorage.setItem("people", JSON.stringify( people));
    render();
  }
);

function render() {
  var div = document.getElementById('out'), i, html = '', p;
  for( i=0; i
'+p.addr+'
';
  }
  div.innerHTML = html;
}







Ответ 4

Можно сохранять в сессии или куки, например.
Когда нажимается на кнопку, отправляется запрос скрипту-обработчику.
Принимайте им данные из нужных полей, например, так:

if(isset($_POST['name']) && !empty($_POST['name'])) {
    $_SESSION['input_name'] = $_POST['name'];
}


А при загрузке страницы:

$name = "";
if(!empty($_SESSION['input_name'])) {
    $name = $_SESSION['input_name'];
}


Только сайт уже не на html получится, а на php.
Можете, конечно, использовать библиотеку jquery-cookie, с ее помощью сохранять данные
в cookie и так же при генерации страницы проверять наличие содержимого полей в них,
но уже средствами jquery.