로컬 스토리지의 탄생 배경

HTML4 시대에는 쿠키의 크기, 형식, 저장 데이터 형식의 제한으로 인해 웹사이트 애플리케이션이 사용자 정보 중 일부를 브라우저 측에 저장하려는 경우 쿠키만 사용할 수 있습니다. 그러나 쿠키의 이러한 제한은 쿠키가 ID와 같은 식별자와 같은 단순한 데이터만 저장할 수 있음을 의미합니다.

다음은 쿠키 제한사항입니다.

대부분의 브라우저는 최대 4096바이트의 쿠키를 지원합니다.

브라우저에서는 사이트가 사용자 컴퓨터에 저장할 수 있는 쿠키 수도 제한합니다. 대부분의 브라우저는 사이트당 20개의 쿠키만 허용합니다. 더 많은 쿠키를 저장하려고 하면 가장 오래된 쿠키가 삭제됩니다.

또한 일부 브라우저는 모든 사이트에서 허용하는 총 쿠키 수에 절대적인 제한을 두고 있습니다(보통 300개).

쿠키는 기본적으로 HTTP 요청과 함께 백엔드 서버로 전송되지만 모든 요청에 쿠키가 필요한 것은 아닙니다. 예를 들어 js, CSS, 사진 등에 대한 요청에는 쿠키가 필요하지 않습니다.

쿠키의 일련의 한계를 깨기 위해 HTML5는 JS의 새로운 API를 통해 대용량 데이터를 클라이언트 브라우저에 직접 저장할 수 있으며, 복잡한 로컬 데이터베이스를 지원하여 JS를 더욱 효율적으로 만듭니다. HTML5는 두 가지 유형의 WebStorage를 지원합니다.

영구 로컬 저장소(localStorage)

세션 수준 로컬 저장소(sessionStorage)

localStorage 지원 여부 확인:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>php中文网</title> 
</head>
<body>
<div id="result"></div>
<script>
    if(window.localStorage){     alert("浏览支持localStorage") }else{    alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
</script>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> </head> <body> <div id="result"></div> <script> if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") } </script> </body> </html>

제출하다 코드 재설정

자동운전