Latest web development tutorials

HTML5 웹 스토리지

HTML5 웹 스토리지, 쿠키 로컬 스토리지보다 더 나은.

HTML5 웹 스토리지는 무엇입니까?

사용자에 로컬로 저장된 데이터를 검색 할 수 있습니다 HTML5를 사용합니다.

앞서 로컬 저장소는 쿠키를 사용. 그러나 웹 보안 및 스토리지보다 신속해야한다. 이러한 데이터는 서버에 저장되지 않지만, 단지 위치에 사용자에 의해 요청 된 데이터에 대한 데이터. 또한 사이트의 성능에 영향을주지 않고 대량의 데이터를 저장할 수있다.

키 / 값 쌍으로 된 데이터는 웹 페이지 데이터는 웹 액세스를 사용하도록 허용되어 존재한다.

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 8 이상, 파이어 폭스, 오페라, 크롬, 사파리 지원 웹 스토어.

참고 : Internet Explorer 7 및 IE의 이전 버전의 웹 스토어를 지원하지 않습니다.

로컬 스토리지 및 sessionStorage

클라이언트 데이터에 저장된 두 개체 수 있습니다 :

  • 로컬 스토리지 - 아니 시간 제한 데이터 저장
  • sessionStorage -의 세션에 대한 데이터 저장

웹 스토리지를 사용하기 전에 브라우저 지원 및 로컬 스토리지 sessionStorage를 확인 :

(대한 typeof (저장)! == 경우 "정의되지 않은") { // 예! 지원 로컬 스토리지 sessionStorage 객체! 일부 코드를 // ..... } 그렇지 않으면 { // 죄송합니다! 웹 스토어를 지원하지 않습니다. }

로컬 스토리지 개체

시간 제한 정보 저장 로컬 스토리지 오브젝트 없다. 다음 날, 두 번째 주, 또는 내년 이후에, 데이터는 계속 사용할 수 있습니다.

예

. 로컬 스토리지의 LASTNAME = "스미스"; 에서 getElementById 문서 ( "결과") innerHTML을 = "성"... + 로컬 스토리지의 LASTNAME;

»시도

분석의 예 :

  • "스미스의"로컬 스토리지 키 / 값 쌍을 만들기 = 키 = "LASTNAME"및 값 사용
  • 검색은 "LASTNAME"값에 대한 키는 ID = "결과"요소를 삽입

팁 : 키 / 값 쌍은 일반적으로 다음 형식을 변환 할 자신의 필요에 따라 수있는 문자열로 저장됩니다.

다음의 예는 사용자가 디지털 코드 형식 문자열 값을 변환하는 버튼을 클릭 횟수를 나타낸다 :

예

면 (로컬 저장. clickCount는) { . 로컬 스토리지의 clickCount는 = 수 (로컬 스토리지의 clickCount는 .) + 1;} 그렇지 않으면 { . 로컬 스토리지의 clickCount는 = 1;} .. 문서에서 getElementById는 ( "결과" ) innerHTML을은 = " + 로컬 스토리지 clickCount는 + 당신은 버튼을 클릭 한" "배.";

»시도

sessionStorage 객체

데이터 저장을위한 세션 sessionStorage 방법. 사용자가 브라우저 윈도우를 닫을 때, 데이터는 삭제한다.

어떻게 만들고 sessionStorage에 액세스 할 수 ::

예

면 (SessionStorage. clickCount는) { . sessionStorage의 clickCount는 = 번호 (clickCount는 sessionStorage .) + 1} 그렇지 않으면 { . sessionStorage의 clickCount는 = 1;} .. 문서에서 getElementById ( "결과" ") innerHTML을 = + sessionStorage clickCount는 + 버튼을 클릭 한이 대화에서" "시간을.";

»시도