HTTP는 무국적이므로 당신은 누구입니까? 당신은 무엇을 했나요? 죄송합니다. 서버에서는 알 수 없습니다.
따라서 나중에 사용할 수 있도록 사용자 정보(예: 사용자 이름, 장바구니 구매 등)를 서버에 저장하는 세션이 나타납니다.
그러나 세션은 일시적이며 사용자가 웹사이트를 떠나면 삭제됩니다. 정보를 영구적으로 저장하려면 데이터베이스에 저장할 수 있습니다!
세션 작동 방식: 각 사용자에 대한 세션 ID(core!!!)를 만듭니다. 세션 ID는 쿠키에 저장됩니다. 즉, 브라우저가 쿠키를 비활성화하면 세션이 무효화됩니다! (그러나 URL을 통해 세션 ID를 전달하는 등 다른 방법으로 달성할 수 있습니다.)
사용자 인증은 일반적으로 세션을 사용합니다.
쿠키:목적: 웹 사이트가 사용자를 식별할 수 있도록 클라이언트 측에 로컬로 저장되는 데이터(일반적으로 암호화됨)입니다.
쿠키는 동일한 출처의 http 요청에서 (필요하지 않은 경우에도) 전달됩니다. 즉, 클라이언트와 서버 간에 앞뒤로 전달됩니다!
쿠키의 데이터 크기는 4K를 초과하지 않습니다.
쿠키 유효 기간: 설정된 쿠키 유효 기간은 브라우저가 닫혀도 만료 시간까지 유효합니다!
로컬스토리지 및 세션스토리지:초기에는 로컬 캐싱을 위해 쿠키가 널리 사용되었지만 웹 스토리지는 더 안전하고 빨라야 합니다!
이 데이터는 서버(클라이언트에 저장됨)에 저장되지 않으며 서버 성능에 영향을 미치지 않습니다!
sessionStorage 및 localStorage 데이터 저장소에도 크기 제한이 있지만 쿠키보다 훨씬 크고 5M 이상에 도달할 수 있습니다!
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 -호환 가능한 콘텐츠=ie=edge> <title>웹 저장소</title></head><body> <div id=test></div> <script> if (typeof (저장소) != 정의되지 않음) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = 현재 위치: + localStorage.name; 첫 번째: + localStorage.name1 + , + localStorage.key(0)); localStorage.removeItem('name1'); console.log(두 번째: + localStorage.name1); console.log(세 번째: + localStorage.getItem('name')) console.log(last: + localStorage.name); document.getElementById('test').innerHTML = 브라우저를 업데이트하세요! 현재 브라우저는 스토리지를 지원하지 않습니다. } </script></body></html>프로그램 실행 결과:
참고: 키-값 쌍은 문자열로 저장되며 요구사항에 따라 유형을 변경해야 합니다(예: 추가를 위해 숫자 유형으로 변경).
HTML5 애플리케이션 캐시:캐시 매니페스트 파일을 생성하면 네트워크 연결 없이 웹 애플리케이션을 캐시하고 액세스할 수 있습니다!
애플리케이션 캐시의 장점:1. 오프라인 브라우징
2. 더 빠른 속도: 캐시된 리소스가 더 빠르게 로드됩니다.
3. 브라우저 부하 감소: 클라이언트는 서버에서 변경된 리소스만 다운로드하거나 업데이트합니다.
지원 상태:
IE10 이상, 최신 브라우저.
사용:
<!DOCTYPE html><html 매니페스트=demo.appcache></html>
참고: 애플리케이션 캐시를 활성화하려면 매니페스트 속성(확장자: .appcache)을 지정해야 합니다. 매니페스트 속성이 지정되지 않으면 페이지가 캐시되지 않습니다(페이지가 매니페스트 파일에 직접 지정되지 않는 한).
매니페스트 파일은 서버에서 MIME 유형: text/cache-manifest로 올바르게 구성되어야 합니다.
매니페스트 파일:매니페스트는 캐시된 것과 캐시되지 않은 것을 브라우저에 알려주는 간단한 텍스트 파일입니다!
매니페스트는 세 부분으로 나눌 수 있습니다.캐시 매니페스트: 여기에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다!
네트워크: 이 항목에 나열된 파일은 서버와의 네트워크 연결이 필요하며 캐시되지 않습니다!
FALLBACK: 이 항목은 페이지에 접근할 수 없을 때(예: 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. 프로그램이 애플리케이션 캐시를 업데이트합니다!
웹 작업자:웹 워커는 다른 스크립트와 독립적으로 백그라운드에서 실행되는 자바스크립트이며 페이지 성능에 영향을 주지 않습니다!
일반 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 -호환 가능한 콘텐츠=ie=edge> <title>웹 작업자</title></head><body> <p>개수: <output id=count></output></p> <button onclick=startWorker()>Start</button> <button onclick=overWorker()>End</button> <script> var w; function startWorker(){ // 브라우저가 웹 워커를 지원하는지 확인 if(typeof(Worker) !=='undefine'){ if(typeof(w)=='undefine'){ //웹 워커 객체 생성 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;testWorker.js 파일:
var i=0;function timedCount() { i+=1; //중요한 부분은 html 페이지에 정보를 반환하는 것입니다. postMessage(i);}timedCount();참고 1: 일반적으로 웹 워커는 이러한 간단한 작업에는 사용되지 않고 더 많은 CPU 리소스를 소비하는 작업에 사용됩니다!
참고 2: Chrome에서 실행하면 "원본 'null'에서 액세스할 수 없습니다."라는 오류가 발생합니다. 내 해결 방법은 xampp에서 apache를 열고 http://localhost/를 사용하여 액세스하는 것입니다.
웹 작업자 단점:웹 작업자는 외부 파일에 있으므로 다음 자바스크립트 개체에 액세스할 수 없습니다.
서버에서 보내는 이벤트는 단방향 정보 전송입니다. 웹 페이지는 서버에서 자동으로 업데이트를 얻을 수 있습니다.
이전: 웹페이지에서 먼저 사용 가능한 업데이트가 있는지 묻고, 서버에서 데이터를 전송하고, 업데이트가 이루어졌습니다(양방향 데이터 전송)!
지원 상태: 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)!==undefine){ // 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>테스트.php:
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:서버 시간: {$ time} /n/n;// 출력 데이터 새로 고침 flash();참고: 뒤에 내용이 없습니다. php 파일은 생략해도 되나요?> 닫기!
HTML5 웹소켓:WebSocket은 여러 탭 간의 통신에 사용될 수 있습니다!
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.