HTML 로컬 스토리지,보다 더 cookies .
HTML 로컬 저장소는 무엇입니까?
로컬 스토리지로, 웹 응용 프로그램은 사용자의 브라우저 내에서 로컬에 데이터를 저장할 수 있습니다.
HTML5하기 전에, 응용 프로그램 데이터에 저장 한 cookies , 모든 서버 요청에 포함되어 있습니다. 로컬 저장소는 더 안전하고, 많은 양의 데이터는 웹 사이트의 성능에 영향을주지 않고, 로컬로 저장 될 수있다.
달리 cookies 의 저장 용량 제한은 훨씬 더 크다 (at least 5MB) 와 정보를 서버로 전송되지 않습니다.
로컬 저장소 원산지 당입니다 (per domain and protocol) . 모든 페이지는 하나의 원점에서 저장하고 동일한 데이터에 액세스 할 수 있습니다.
로컬 및 세션 저장
웹 스토리지는 두 개의 서로 다른 저장 영역 로컬 스토리지 및 세션 스토리지 범위와 수명에 차이가 있습니다.
로컬 스토리지에 저장 데이터가 원산지 당이다 (프로토콜, 호스트 이름과 동일 출처 정책에 정의 된 포트 번호의 조합) (데이터가 이전에 저장된 데이터를 같은 기원에서 페이지에서로드 된 모든 스크립트를 사용할 수 있습니다) 및 브라우저가 닫힌 후에 지속됩니다.
세션 스토리지는 당 기원 당 창 또는 탭과 창의 수명에 제한됩니다. 세션 스토리지는 동일한 웹 응용 프로그램의 개별 인스턴스가 아니라 쿠키를 지원하지 않는 서로, 사용 사례를 방해하지 않고 다른 창에서 실행할 수 있도록하기위한 것입니다.
브라우저 지원
테이블의 숫자는 완전히 로컬 저장소를 지원하는 최초의 브라우저 버전을 지정합니다.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML 로컬 저장소는 개체
HTML 로컬 스토리지는 클라이언트에 데이터를 저장하기위한 두 개체를 제공합니다 :
- window.localStorage - 아니 만료 날짜 데이터를 저장
- window.sessionStorage - 하나 개의 세션에 대한 데이터를 저장 (브라우저 탭을 닫을 때 데이터가 손실됩니다)
로컬 스토리지를 사용하기 전에, 대한 브라우저 지원 확인 localStorage 및 sessionStorage :
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
로컬 스토리지 개체
로컬 스토리지 오브젝트없이 만료 날짜로 데이터를 저장합니다. 데이터는 브라우저를 닫을 때 삭제되지 않습니다, 다음 일, 주, 또는 연도 사용할 수 있습니다.
예
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); »그것을 자신을 시도 예 설명 :
- 크리에이트 localStorage 와 이름 / 값 쌍 name="lastname" 과 value="Smith"
- 값 검색 "lastname" 및 ID = "결과"인 요소에 삽입
이 예는 위의이 같은 기록 될 수있다 :
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
쓰레기 수거 구문 "lastname" 다음과 같이 로컬 스토리지 항목은 다음과 같습니다
localStorage.removeItem("lastname");
참고 : 이름 / 값 쌍은 항상 문자열로 저장됩니다. 필요한 경우 다른 형식으로 변환하는 것을 잊지 마십시오!
다음은 사용자가 버튼을 클릭 한 횟수를 계산합니다. 이 코드에서 값 문자열은 카운터를 증가 할 수있는 숫자로 변환된다 :
예
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s)."; »그것을 자신을 시도 sessionStorage 객체
sessionStorage 목적은 동일하다 localStorage 단지 하나 개의 세션에 대한 데이터를 저장하는 것을 제외하고, 개체. 사용자가 특정 브라우저 탭을 닫을 때 데이터가 삭제됩니다.
다음 예제에서는 현재 세션에서, 버튼을 클릭 한 사용자 횟수를 계산합니다 :
예
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session."; »그것을 자신을 시도