HTML5 저장 유형: 1. 데이터의 장기 저장에 적합한 로컬 저장소 "localstorage" 2. 로컬 저장소 "sessionstorage", 저장된 데이터는 브라우저를 닫은 후 자동으로 삭제됩니다. ", 애플리케이션에 필요한 로컬 캐시 파일입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
h5 이전에는 쿠키가 주로 저장용으로 사용되었습니다. 쿠키의 단점은 요청 헤더에 데이터를 전달하고 크기가 4k 이내라는 것입니다. 메인 도메인 오염.
주요 애플리케이션: 장바구니, 고객 로그인
IE 브라우저에는 UserData가 있고 크기는 64k이며 IE 브라우저에서만 지원합니다.
HTML5는 클라이언트 측에 데이터를 저장하는 두 가지 새로운 방법을 제공합니다.
- localStorage - 시간 제한이 없는 데이터 저장
- sessionStorage - 세션용 데이터 저장
1 로컬 저장소 localstorage
localStorage 방법 저장 데이터에는 시간 제한 없음. 데이터는 다음 날, 다음 주 또는 연도 이후에도 계속 사용할 수 있습니다.
localStorage: 데이터의 장기 저장에 적합하며, 브라우저를 닫은 후에도 데이터가 손실되지 않습니다.
저장 방법:
키-값 쌍(Key-Value) 형태로 저장됩니다. 영구적으로, 수동으로 삭제하지 않는 한 만료되지 않습니다.
크기:
도메인 이름당 5M
지원:
참고: IE9 localStorage는 로컬 파일을 지원하지 않습니다. 이를 지원하려면 프로젝트를 서버에 배포해야 합니다.
탐지 방법:
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}일반적으로 사용되는 API:
getItem //기록 가져오기
setIten//기록 설정
removeItem//기록 제거
key/ /키에 해당하는 값 가져오기
clear//기록 지우기
저장된 콘텐츠:
array, picture, json, style, script. . . (문자열로 직렬화할 수 있는 모든 콘텐츠를 저장할 수 있습니다.)
2. 로컬 저장소 세션 저장소
HTML5의 로컬 저장소 API에서 localStorage와 sessionStorage는 사용법이 동일합니다. 차이점은 종료 후에 sessionStorage가 사용된다는 것입니다. 페이지는 비어 있고 localStorage는 항상 저장됩니다.
3. 오프라인 캐싱(애플리케이션 캐시)
HTML5에서는 캐시 매니페스트 파일을 생성하여 웹을 캐시하고 사용할 수 있는 애플리케이션 캐시를 도입합니다.
응용 프로그램에 필요한 파일의 로컬 캐시
사용:
1구성 매니페스트 파일
페이지:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
매니페스트 파일:
매니페스트 파일은 브라우저에 무엇을 알려 주는 간단한 텍스트 파일입니다. 캐시된 것(그리고 캐시되지 않은 것).
매니페스트 파일은 세 부분으로 나눌 수 있습니다:
①CACHE MANIFEST - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다.
②NETWORK - 이 제목 아래에 나열된 파일은 서버에 연결되어야 합니다.
3FALLBACK - 이 제목 아래 나열된 파일은 페이지에 액세스할 수 없는 경우(예: 404 페이지) 대체 페이지를 지정합니다.
전체 데모:
CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html
server :매니페스트 파일은 올바른 MIME 유형, 즉 "text/cache-manifest"로 구성되어야 합니다.
예를 들어 Tomcat:
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>Common API:
핵심은 애플리케이션 캐시의 현재 상태를 나타내는 상태 속성이 있는 applicationCache 개체입니다.
0(UNCACHED): 캐시가 없습니다. 즉, 페이지와 관련된 애플리케이션이 없습니다. 캐시
1(IDLE): 유휴 상태, 즉 애플리케이션 캐시가 업데이트되지 않았습니다.
2(CHECKING): 확인 중, 즉 설명 파일을 다운로드하여 확인하는 중입니다. 업데이트용
3(DOWNLOADING): 다운로드 중, 즉 애플리케이션 캐시가 설명을 다운로드 중입니다. 파일에 지정된 리소스
4(UPDATEREADY): 업데이트가 완료되고 모든 리소스가 다운로드되었습니다
5(IDLE): 포기됨 , 즉, 애플리케이션 캐시 설명 파일이 더 이상 존재하지 않으므로 페이지에서 더 이상 애플리케이션 캐시에 액세스할 수 없습니다
관련 이벤트:
애플리케이션 캐시 상태의 변경을 나타냅니다.
checking: 브라우저가 다음을 볼 때 트리거됩니다.
error : 업데이트 확인 또는 리소스 다운로드 중 오류가 전송될 때 트리거
noupdate : 확인 중 설명 파일에서 파일에 변경 사항이 없음을 발견할 때 트리거
downloading: 다운로드 시 트리거 애플리케이션 캐시 리소스 시작
progress: 파일 다운로드 및 애플리케이션 캐시 프로세스 중 지속적인 다운로드에 의해 트리거됨
updateready: 페이지의 새 애플리케이션 캐시가 다운로드될 때 트리거됨 Trigger
cached: 애플리케이션 캐시가 완전히 사용 가능할 때 트리거됨
응용 프로그램 캐시의 세 가지 장점:
① 오프라인 탐색
② 페이지 로딩 속도 향상
③ 서버 부담 감소
주의 사항:
1. 브라우저마다 캐시된 데이터의 용량 제한이 다를 수 있습니다. (일부 브라우저에서는 사이트당 5MB로 제한됩니다.)
2. 매니페스트 파일 또는 내부에 나열된 파일을 정상적으로 다운로드할 수 없는 경우 전체 업데이트 프로세스는 실패한 것으로 간주되며 브라우저는 이전 캐시를 계속 사용합니다. 3. 매니페스트를 참조하는 html은 매니페스트 파일과 동일한 출처를 가져야 하며 동일한 도메인에 있어야 합니다. 참조된 매니페스트 파일을 자동으로 캐시합니다. 즉, HTML 콘텐츠가 변경되면 버전을 업데이트해야 합니다.
5. 매니페스트 파일의 CACHE는 NETWORK 및 FALLBACK의 위치 순서와 관련이 없습니다. 암시적 선언인 경우 FALLBACK의 리소스는 동일한 소스를 가져야 합니다. 7. 버전을 업데이트한 후에는 새로 고쳐야 합니다. 새 버전은 한 번만 시작되며(페이지는 한 번 새로 고쳐집니다) 청취 버전 이벤트를 추가해야 합니다.
8. 사이트의 다른 페이지에 대해 매니페스트 속성이 설정되지 않은 경우에도 요청된 리소스가 캐시에 있으면 캐시에서 액세스됩니다.
9. 매니페스트 파일이 변경되면 리소스 요청 자체가 트리거됩니다.
오프라인 캐싱과 기존 브라우저 캐싱의 차이점:
1. 오프라인 캐싱은 전체 애플리케이션에 대한 반면, 브라우저 캐싱은 단일 파일입니다. 2. 오프라인 캐싱은 네트워크가 연결된 경우에도 여전히 페이지를 열 수 있습니다. 연결이 끊어졌지만 브라우저 캐싱은 할 수 없습니다.
3. 오프라인 캐싱은 브라우저 업데이트 리소스를 사전에 알릴 수 있습니다
관련 권장 사항: "
html 비디오 튜토리얼"
위 내용은 html5에는 어떤 유형의 저장 방법이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
usestate () vs. usereducer () : 주 요구에 맞는 올바른 후크 선택Apr 24, 2025 pm 05:13 PMchelectionSimple, IndependentStateVaribles; useUserEducer () useuserEducer () forcomplexStateLogicor () whenStatedSonpreviousState.1) usestate () isidealforsimpleupdatesliketogglingabooleorupdatingacounter.2) usbetterformanagingmentiplesub-vvalusorac
usestate ()로 상태 관리 : 실용적인 자습서Apr 24, 2025 pm 05:05 PMUsestate는 클래스 구성 요소 및 기타 상태 관리 솔루션보다 우수합니다. 국가 관리를 단순화하고 코드를 더 명확하게하고 읽기 쉽고 React의 선언적 특성과 일치하기 때문입니다. 1) Usestate는 함수 구성 요소에서 상태 변수를 직접 선포 할 수있게합니다. 2) 후크 메커니즘을 통해 다시 렌더링하는 동안 상태를 기억합니다.
usestate ()를 사용하고 대체 상태 관리 솔루션을 고려할 때Apr 24, 2025 pm 04:49 PMuseUsestate () forlocalcomponentStateManagement; 고려 사항 forglobalstate, complexlogic, orperformanceissues.1) usestate () isidealforsimple, localstate.2) useglobalstatesolutionslikereduxorcontextforsharedstate.3) optforredooxtoolkitormobxcomcoccomcoccomcoccomcoccomcoccomcoccomcoccomcoccomporccomcoccomporccomcoccomport
React의 재사용 가능한 구성 요소 : 코드 유지 관리 및 효율성 향상Apr 24, 2025 pm 04:45 PMreusablecomponentsinreacececodemainabenabilityandefficiency는 hallowingesamecomponentacrossdifferentpartsofanapplicationorprojects.1) 그들을 retuduceredundancyandsimplifyupdates.2) theyseconsistencyinuserexperience.3) theyquireoptim
React의 가상 DOM : 효율적인 업데이트를 통한 성능 향상Apr 24, 2025 pm 04:41 PMthevirtualdomisAlightIgentin-memorycopyofTherealDoModedByReaCtTooptimizeUiUpdates.itboostSperformanceByminiMizingDirectDomManipulationThevirtOdMomfirst, thenecessAppledOnyCesseAcTeActualDom.
HTML 및 React의 통합 : 실용 가이드Apr 21, 2025 am 12:16 AMHTML 및 React는 JSX를 통해 완벽하게 통합하여 효율적인 사용자 인터페이스를 구축 할 수 있습니다. 1) JSX를 사용하여 HTML 요소를 포함시킵니다. 2) Virtual DOM을 사용하여 렌더링 성능을 최적화, 3) 구성 요소화를 통해 HTML 구조를 관리하고 렌더링합니다. 이 통합 방법은 직관적 일뿐 만 아니라 응용 프로그램 성능을 향상시킵니다.
React 및 HTML : 데이터 렌더링 및 처리 이벤트Apr 20, 2025 am 12:21 AM상태 및 소품을 통해 데이터를 효율적으로 렌더링하고 합성 이벤트 시스템을 통해 사용자 이벤트를 처리합니다. 1) usestate를 사용하여 카운터 예제와 같은 상태를 관리하십시오. 2) 버튼 클릭과 같은 JSX에 함수를 추가하여 이벤트 처리가 구현됩니다. 3) Todolist 구성 요소와 같은 목록을 렌더링하려면 주요 속성이 필요합니다. 4) 양식 처리의 경우 양식 구성 요소와 같은 usestate 및 e.preventDefault ().
백엔드 연결 : 반응이 서버와 상호 작용하는 방법Apr 20, 2025 am 12:19 AM반응은 HTTP 요청을 통해 서버와 상호 작용하여 데이터를 획득, 전송, 업데이트 및 삭제합니다. 1) 사용자 작동 이벤트 트리거, 2) HTTP 요청 시작, 3) 프로세스 서버 응답, 4) 구성 요소 상태 및 재 렌더 업데이트.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
