Пересылка переменных и другой информации между документами HTML

Question

Я думаю, что это довольно простой вопрос, но потому что я новичок в front-end. Не уверен, как правильно его выполнить. Что я делаю: Создание небольшого проекта, небольшой частью которого является логин. Я захожу на свою страницу, она проверяет базу данных, если имя и пароль верны, она будет входить в систему, предоставляя доступ к нескольким различным страницам / html-документам на основе фактического проекта

Что я хочу понять, как это сделать: я хотел просто сохранить этот первый начальный Логин (ID) как переменную, поэтому в верхней части страницы всегда отображался человек, вошедший в систему ... Вид, как и любой другой Основная функция страницы входа.

Как именно я могу сохранить эту переменную в своем javascript и отправить ее на каждую новую HTML-страницу на сайте? Я не уверен, что это можно сделать исключительно через javascript, или мне нужно как-то сохранить его, используя базу данных / php, и отправить его обратно. Спасибо за любую помощь, которую вы оказываете!

Просто некоторый код, помогающий работать с именами переменных и видеть, как все отправляется / принимается.

<script>
  function ajaxLoginFunction(){
  var ajaxRequest = new XMLHttpRequest();
  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){

      var ajaxDisplay = document.getElementById('ajaxDiv')
      var res = ajaxRequest.innerHTML = this.responseText;

      //login as a student or teacher variables to redirect
      var student_page="studentview.html";
      var teacher_page="teacherview.html";
      var data=JSON.parse(res)

      //ajaxDisplay.innerHTML = (data['questions']['question'][2].toString());
      if (data['type']=="student") window.location.replace(student_page);
        else if(data['type']=="teacher") window.location.replace(teacher_page);
            else ajaxDisplay.innerHTML = "Login Failed";

        }
    };
    //storing my id and password to be sent to database
    //which sends back the info for student/teacher redirect pages
    var ucid = document.getElementById('username').value;
    var pass = document.getElementById('password').value;
    var login = "login";
    //how would i hold onto the ucid after logging in and redirecting to another url?
    var myObj = {id: login, usr: ucid, pwd: pass};
    var myJSON = JSON.stringify(myObj);

    ajaxRequest.open("POST","https://myphpfile.php", true);
    ajaxRequest.send(myJSON);
}
</script>

Answer 1

Я бы порекомендовал куки, хотя вы также можете использовать переменные сеанса.Куки-файлы могут быть лучшим путем, если вы настроены исключительно на использование JS.Хотя в PHP есть несколько хороших инструментов для обоих типов:

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

// PHP COOKIE CREATION
setcookie(<cookie name>, <cookie value>, <expiration>, <access - '/' for all site pages>);

Проверьте, существует ли файл cookie ...

// JS COOKIE CHECK
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 ""; // If no cookie 'cname' exists
}

// PHP COOKIE CHECK
$_COOKIE[<cookie name>] // Will return cookie value; use isset() to verify cookie has been set

На каждой «ограниченной» странице проверьте, существует ли файл cookie, ипредоставить доступ, если это так;если нет, перенаправьте их на страницу входа или покажите другое сообщение.Чтобы удалить файл cookie или «Выйти из системы», установите срок действия до сегодняшнего дня (отрицательный срок действия).Или просто установите пустое значение cookie.Я использую расширение браузера (EditThisCookie на Chrome), чтобы проводить тестирование и видеть ценность сохраненных файлов cookie.Вы можете хранить несколько файлов cookie, если хотите, - один для имени пользователя, другой для типа пользователя - или обрабатывать различия между «учителями» и «учениками» другим способом.Не забудьте не хранить пароли локально.т.е. не помещайте пароль в куки.

PHP-сессии также были бы полезны.Тонны документации повсюду.Переменные сеанса отлично подойдут для того, чего вы пытаетесь достичь ...

// PHP SESSION VARIABLE EXAMPLES
  $_SESSION['user_id'] = $user->username; // ucid
  $_SESSION['priv'] = $user->type; // 'teacher' or 'student'

Как и в случае с cookie-файлами, на каждой «ограниченной» странице вы добавляете немного PHP для проверки сеанса на ID.и тип доступа.Будучи PHP, ни одна из этой информации не будет храниться локально, что дает вам бонусные баллы за безопасность и многое другое.