Поскольку HTTP не имеет состояния, кто вы? Что ты сделал? Извините, сервер не знает.
Так появляется сессия, которая сохраняет информацию о пользователе на сервере для дальнейшего использования (например, имя пользователя, покупки в корзине и т. д.).
Но сеанс временный и будет удален, когда пользователь покинет сайт. Если вы хотите хранить информацию постоянно, вы можете сохранить ее в базе данных!
Как работает сеанс: Создайте идентификатор сеанса (ядро!!!) для каждого пользователя. Идентификатор сеанса сохраняется в файле cookie. Это означает, что если браузер отключит файлы cookie, сеанс станет недействительным! (Но этого можно достичь и другими способами, например, передав идентификатор сеанса через URL-адрес)
Аутентификация пользователя обычно использует сеанс.
печенье:Цель: данные, хранящиеся локально на стороне клиента (обычно в зашифрованном виде), чтобы веб-сайт мог идентифицировать пользователя.
Файл cookie будет передаваться (даже если он не нужен) в HTTP-запросе от одного и того же источника, то есть передаваться туда и обратно между клиентом и сервером!
Размер данных cookie не превышает 4 КБ.
Срок действия файлов cookie: установленный период действия файлов cookie действителен до истечения срока их действия, даже если браузер закрыт!
localStorage и sessionStorage:Раньше файлы cookie обычно использовались для локального кэширования, но веб-хранилище должно быть безопаснее и быстрее!
Эти данные не сохраняются на сервере (хранятся на клиенте) и не влияют на производительность сервера!
Хранилища данных sessionStorage и localStorage также имеют ограничения по размеру, но они намного больше, чем файлы cookie, и могут достигать 5 МБ или даже больше!
localStorage: хранение данных без ограничения по времени!
sessionStorage: Как видно из английского значения, это хранилище данных сеанса, поэтому после того, как пользователь закрывает браузер (вкладку/окно), данные удаляются!
Поддержка веб-хранилища HTML5:IE8 или выше, современный браузер.
Данные хранятся в парах ключ-значение:
И localStorage, и sessionStorage имеют следующие методы:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>веб-хранилище</title></head><body> <div id=test></div> <script> if (typeof (Storage) != не определено) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = вы: + localStorage.name; сначала: + localStorage.name1 + , + localStorage.key(0)); console.log(второй: + localStorage.name1); console.log(третий: + localStorage.getItem('name')); localStorage.clear(); console.log(last: + localStorage.name); document.getElementById('test').innerHTML = Обновите свой браузер! В настоящее время браузер не поддерживает stroage } </script></body></html>Результаты запуска программы:
Примечание. Пары ключ-значение хранятся в виде строк, а тип следует изменить в соответствии с требованиями (например, для сложения измените тип на Числовой).
Кэш приложения HTML5:Создав файл манифеста кэша, веб-приложения можно кэшировать и получать к ним доступ без подключения к сети!
Преимущества кэша приложений:1. Автономный просмотр;
2. Более высокая скорость: кэшированные ресурсы загружаются быстрее;
3. Уменьшите нагрузку на браузер: клиент будет только загружать или обновлять измененные ресурсы с сервера.
Статус поддержки:
IE10 или выше, современный браузер.
использовать:
<!DOCTYPE html><html манифест=demo.appcache></html>
Примечание. Чтобы включить кэш приложения, необходимо указать атрибут манифеста (расширение: .appcache), если атрибут манифеста не указан, страница не будет кэшироваться (если страница не указана непосредственно в файле манифеста!)
Файл манифеста должен быть правильно настроен с использованием MIME-типа: text/cache-manifest на сервере.
Файл манифеста:Манифест представляет собой простой текстовый файл, который сообщает браузеру, что кэшируется, а что нет!
Манифест можно разделить на три части:МАНИФЕСТ КЕША: перечисленные здесь файлы будут кэшироваться после первой загрузки!
СЕТЬ: Файлы, перечисленные в этом пункте, требуют сетевого подключения к серверу и не будут кэшироваться!
ВОЗВРАТ: В этом элементе указана резервная страница, когда к странице невозможно получить доступ (например: страница 404)!
тест.appcache:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/Если к файлам в каталоге нет доступа, используйте /offline.html вместо /html/ / offline.htmlОбновить кэш приложения:
1. Пользователь очищает кэш браузера!
2.Изменен файл манифеста (#: указывает на комментарий, и если его изменить на #2018 1 1 v20.0.0, браузер перекэширует!)
3. Программа обновляет кэш приложения!
Веб-работники:Веб-воркеры — это JavaScript, который работает в фоновом режиме, независимо от других скриптов и не влияет на производительность страницы!
При выполнении сценария на обычной HTML-странице страница не будет отвечать, пока сценарий не будет загружен!
Поддержка: IE10 или выше, современные браузеры.
Пример: html-файл:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>веб-работник</title></head><body> <p>Count: <output id=count></output></p> <button onclick=startWorker()>Start</button> <button onclick=overWorker()>End</button> <script> var w; function startWorker(){ // Проверяем, поддерживает ли браузер веб-воркер if(typeof(Worker) !=='undefined'){ if(typeof(w)=='undefined'){ //Создаем объект веб-работника w=new Worker('testWorker.js') } // Событие продолжает прослушиваться (даже если внешний скрипт завершился), пока не будет завершено w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data } }else{ document.getElementById; ('count' ).innerHTML='Браузер не поддерживает веб-воркеры' } } function overWorker() { // Завершение работы веб-страницы; Рабочий объект, освобождает ресурсы браузера/компьютера w.terminate() w=undefine } </script></body></html>;Файл testWorker.js:
var i=0;function timedCount() { i+=1; //Важная часть: вернуть часть информации на html-страницу postMessage(i); setTimeout('timedCount()',500);}timedCount();Примечание 1. Обычно веб-воркеры используются не для таких простых задач, а для задач, которые потребляют больше ресурсов ЦП!
Примечание 2. Запуск в Chrome приведет к ошибке «Невозможно получить доступ из источника «null». Мое решение: откройте Apache в xampp и используйте http://localhost/ для доступа.
Недостатки веб-работника:Поскольку веб-воркер расположен во внешнем файле, он не может получить доступ к следующим объектам JavaScript:
Событие, отправленное сервером, представляет собой одностороннюю передачу информации; веб-страница может автоматически получать обновления с сервера!
Раньше: веб-страница сначала спрашивала, есть ли доступные обновления, сервер отправлял данные, и обновления были сделаны (двусторонняя передача данных)!
Статус поддержки: Все современные браузеры, кроме IE, поддерживают его!
Пример кода: HTML-файл:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>отправить отправленное событие</title></head><body> <p>отправить информацию о событии</p> <div id=test></div> <script> // Определяем, поддерживает ли браузер EventSource if(typeof(EventSource)!==undefined){ // Создаем объект EventSource var source=new EventSource(test.php); Прослушивание событий source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> }else{; document.getElementById('test').innerHTML=извините, браузер не поддерживает событие, отправленное сервером } </script></body></html>test.php:
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:Время сервера: {$ time} /n/n;// Обновить выходные данныеlush();Примечание. Содержимого нет, файл php можно опустить?> Закрыть!
Веб-сокет HTML5:WebSocket можно использовать для связи между несколькими вкладками!
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.