HTML4 ERA의 크기, 형식 및 스토리지 데이터 형식의 제한으로 인해 웹 사이트 응용 프로그램이 브라우저에 정보의 일부를 저장하려는 경우 쿠키 만 사용하는 데 사용할 수 있습니다. 그러나 쿠키의 이러한 제한은 또한 쿠키와 같은 간단한 데이터로 이어집니다. ID와 같은 일부 식별자 만 저장할 수 있습니다.
다음은 쿠키의 제한입니다.
대부분의 브라우저는 최대 4096 바이트의 쿠키를 지원합니다.
브라우저는 또한 사용자 컴퓨터에 저장된 쿠키 수를 제한합니다. 대부분의 브라우저는 각 사이트 만 쿠키를 더 많이 저장할 수있게합니다.
일부 브라우저는 또한 모든 사이트 (일반적으로 300)에서 수락 할 총 쿠키 수를 절대 제한합니다.
쿠키의 기본 상황은 HTTP 요청으로 백그라운드 서버로 전송되지만 모든 요청에 JS, CSS, 사진 및 기타 요청과 같은 쿠키가 필요하지는 않습니다.
쿠키에 일련의 제한 사항을 깨뜨리려면 HTML5는 JS의 새로운 API를 통해 많은 양의 데이터를 클라이언트 브라우저에 직접 저장할 수 있으며 복잡한 로컬 데이터베이스를 지원하여 JS를보다 효율적으로 만들 수 있습니다. HTML5는 두 가지 유형의 웹 스토리지를 지원합니다.
H5에 저장된 두 개의 API가 있으며, 하나는 웹 스토리지이고, 다른 하나는 웹 SQL입니다. 어떤 사람이 JavaScript 언어를 기반으로하든 웹 스토리지 사용 방법을 가르쳐 드리겠습니다.
3. 웹 스토리지HTML5는 로컬 스토리지 표준 웹 스토리지를 정의하고 SessionStorage 및 LocalStorage의 두 가지 스토리지 유형을 제공합니다.
1. LocalStorage는 로컬로 저장되었으며 데이터 스토리지는 영구적입니다. 두 번째, 두 번째 또는 내년 이후에는 데이터가 여전히 사용할 수 있습니다.특징 : ① 도메인의 안전하고 영구 보존. 즉, 클라이언트 또는 브라우저의 동일한 도메인 이름의 모든 페이지는 LocalStorage 데이터에 액세스 할 수 있으며 삭제를 제외하고는 데이터가 영구적으로 저장되지만 클라이언트 또는 브라우저 간의 데이터는 서로 독립적입니다.
HTTP 요청으로 데이터는 배경 서버로 전송되지 않습니다.
HTML5 표준에서 최소 4MB를 지원해야하기 때문에 스토리지 데이터의 기회를 고려하지 마십시오.
예를보십시오 :
코드는 다음과 같습니다.
function clickCounter () {ifof (typeof (Storage)! == undefined) {if (localStorage.clickCount) {localStorage.clickCount = number (localStorage.cl ickcount) +1;} else {localStorage.clickCount = 1;} 문서. getElementById (result) .innerHtml = 이미 버튼 + localStorage.clickCount + Times;}를 클릭했습니다 {document.getElementById (result) .innerHtml = 죄송합니다. 브라우저는 웹 스토리지를 지원하지 않습니다. ;}}} </script> <p> <버튼 onclick = clickCounter () type = button> 나를 클릭하십시오! </button> </p> <div id = result> </div> <p> 버튼을 클릭하여 카운터 증가를보십시오. </p> <p> 브라우저 탭 (또는 창)을 끄고이 페이지를 다시 열면 카운터는 계속 계산됩니다 (재설정되지 않음). </p> 2. 세션 스터리지는 세션 중에 유효하며 브라우저가 닫힌 후 데이터가 자동으로 삭제됩니다.특징 : 세션 제어, 단기 보존. 세션의 개념은 서버 측면의 세션 개념과 유사합니다.
호환성
참고 : IE9 LocalStorage는 로컬 파일을 지원하지 않습니다.
현재 모든 주류 브라우저는 HTML5의 웹 스토리지 기능을 어느 정도 지원합니다. 위 그림에서 볼 수 있듯이 기본적으로 모든 최신 브라우저는 웹 스토리지를 지원했습니다.
iOS 플랫폼의 Android 플랫폼과 각 브라우저는 기본적으로 웹 스토리지의 로컬 스토리지 특성을 지원합니다. 시장의 현재 모바일 장치는 Android 전화 및 iPhone 외에도 점점 더 많은 태블릿이며 기본적으로 두 개의 플랫폼에 따라 다릅니다. 모바일 터미널의 웹 스토리지를 사용하면 코드의 엄격함에서 브라우저가 지원되는지 여부를 고려할 필요가 없습니다.
다음은 탐지 방법입니다.
if (winde3. 현지 연구
HTML5의 로컬 스토리지 API의 LocalStorage는 SessionStorage와 동일합니다. 우리는 LocalStorage를 예로 들고 HTML5의 로컬 저장을 간단히 소개하고 Traversal과 같은 일반적인 문제에 대한 몇 가지 예를 만듭니다. LocalStorage는 액세스 데이터에 키 값 쌍을 사용하여 로컬로 저장된 API입니다. 브라우저는 사용 방법, 최대 저장 공간 등과 같은 API를 지원합니다.
스토리지 방법 : 키 가치 방식의 스토리지 문자열. 주요 응용 프로그램 : 쇼핑 카트, 고객 로그인, 게임 아카이브. 본질 본질 예약 데이터 유형 : 배열, 사진, JSON, 스타일, 스크립트. 본질 본질 (문자열 내용으로 직렬화 될 수있는 한 저장 될 수 있습니다) 스토리지 주소 : C :/Users/15014/AppData/Local/Google/Chrome/사용자 데이터/기본/로컬 스토리지 (다른 컴퓨터가 다르므로 숨겨진 파일 디스플레이를 열어야하지만이 폴더를 찾아 LocalStorage를 검색 할 수 있습니다. C 드라이브.LocalStorage는 로컬 스토리지에서 관련 작업을 수행하는 데 도움이되는 4 가지 방법을 제공합니다.
(1) LocalStorage.setItem (키 이름, 키 값)은 로컬 클라이언트에 문자열 유형 데이터를 저장하고, 첫 번째 매개 변수 키는 데이터의 식별자를 나타내고, 두 번째 매개 변수 키 값은 이것의 값입니다. 이것의 값은 이것의 값은 매개 변수의 값이 데이터 자체의 값이라는 것입니다. 좋다:
LocalStorage.setItem (이름, Zhang San); 지역에 대한 28 데이터의 핵심 값
(2) LocalStorage.getItem (키 이름) 지역 영역에 저장된 데이터를 읽고 키 이름을 통해 해당 키 이름 데이터를 매개 변수로 읽습니다. 좋다:
var data = localStorage.getItem (이름);
(3) LocalStorage.removeItem (키 이름) 지역 영역에 저장된 데이터를 제거하고 키 이름을 통해 해당 키 이름 데이터를 매개 변수로 삭제합니다. 좋다:
var data2 = localStorage.removeItem (이름);
(4) LocalStorage.clear () 로컬로 저장된 모든 데이터를 제거합니다. 좋다:
LocalStorage.clear () 로컬로 저장된 모든 데이터를 제거하십시오. 예를 들어 : LocalStorage.clear (); // 보존 된 연령의 키/값도 제거됩니다.
(5) 또한, 세션 스토리지의 4 가지 함수는 기본적으로 위의 로컬 스토리지 클래스의 기능 사용과 동일하며, 이는 자세히 설명되지 않습니다.
다음은 작은 예입니다.
<Text/JavaScript. verife (); 이름과 연령이 존재하는지 확인 // 사용자 정의 확인 함수, 이름과 연령의 데이터가 함수 벡터 () {var type = localStorage.getItem (nam e); .GetItem (Age); 타입 : 'Price :'Alert? 3. 지역 연구 만료 전략HTML5는 로컬 스토리지에 대한 만료 전략을 설정하지 않으므로 데이터 처리 데이터의 만료 전략을 처리 할 때 다음과 같이 자체 만료 전략 프로그램을 작성할 수 있습니다.
<DocType> <Head> <Meta HTTP-equiv = Content-Type Content = 텍스트 /html; 제목> </head> </body> </html> <clation> valcuptime = new date (); : 값, 시간 : curtime})); // JSON 문자열 시퀀스로 변환/* 참고 : json.parse는 var var str = '{이름 : Huangxiaojian, Age : 23}과 같은 문자열에서 JSON 객체를 해결하는 데 사용됩니다. '결과 : JSON.PARSE (STR) 객체 에이전시 : 23 이름 : Huangxiaojian __proto__ : 객체 참고 : {}을 제외한 단일 따옴표는 작성되며, 각 속성 이름은 듀얼 따옴표이어야합니다. json.stringify ()는 var a = {a : 1, b : 2}와 같은 객체에서 문자열을 해결하는 데 사용됩니다. 결과 : json.stringify (a) {a : 1, b : 2} */} 함수 get (key, exp) // exp는 설정의 만료 시간입니다. {var value = localstorage.getitem (key); (새 날짜 (새 날짜) () .gettime () -dataobj.time> exp) // 현재 시간이 생성 시점에 설정된 스토리지 요소> 만료 된 시간 {console.log (expires); 프롬프트 만료} else {콘솔 로그 (value =+dataobj.val)} </script>작업은 아래 그림과 같습니다.
위는이 기사의 모든 내용입니다.