HTML5 스토리지 방법 SessionStorage 및 LocalStorage에 대한 자세한 설명

댓글 : HTML5의 웹 스토리지에는 SessionStorage와 LocalStorage의 두 가지 스토리지 방법이 포함되어 있습니다. SessionStorage는 세션에 데이터를 로컬로 저장하는 데 사용되며 동일한 세션의 페이지에서만 액세스 할 수 있으며 세션이 끝나면 데이터가 파괴됩니다.

1. 웹 스토리지와 쿠키의 차이

웹 스토리지의 개념은 쿠키와 유사하므로 차이점은 대용량 저장을 위해 설계되었다는 것입니다. 쿠키의 크기는 제한되어 있으며 새 페이지를 요청할 때마다 쿠키가 전송되어 대역폭이 보이지 않습니다. 또한 쿠키는 지정된 범위 여야하며 도메인에서 호출 할 수 없습니다.

또한 웹 스토리지에는 setitem, getitem, remobitem, clear 및 기타 방법이 있습니다. 쿠키와 달리 프론트 엔드 개발자는 SetCookies와 GetCookies를 캡슐화해야합니다.

그러나 쿠키도 필연적입니다. 쿠키의 기능은 서버와 상호 작용하는 것이며 HTTP 사양의 일부로 존재하는 반면 웹 스토리지는 데이터를 로컬로 저장하기 위해 만 만들어집니다 (@otakustay에서 수정).

2. HTML5 웹 스토리지의 브라우저 지원 상태

IE7 이하를 제외하고 다른 표준 브라우저는이를 완전히 지원합니다 (IE 및 FF는 웹 서버에서 실행해야합니다). IE는 항상 좋은 일을한다는 것을 언급 할 가치가 있습니다. 예를 들어, IE7 및 IE6의 userData는 실제로 JavaScript의 로컬 저장을위한 솔루션입니다. 간단한 코드 캡슐화를 통해 웹 스토리지를 지원하는 모든 브라우저에 통합 할 수 있습니다.

브라우저가 LocalStorage를 지원하는지 여부를 결정하려면 다음 코드를 사용할 수 있습니다.

Alert ( "지원 지역별 검색")

}

또 다른

{

경고 ( "브라우징은 LocalStorage를 지원하지 않습니다")

}

// 또는 if (typeof window.localStorage == 'undefined') {alert ( "브라우징은 LocalStorage를 지원하지 않습니다")}

3. LocalStorage 및 SessionStorage 작업

LocalStorage 및 SessionStorage는 Setitem, GetItem 및 Remoitem 등과 같은 동일한 작업 방법을 갖습니다.

LocalStorage 및 SessionStorage의 방법 :

setitem 스토리지 값

목적 : 키 필드의 저장 가치

사용법 : .SetItem (키, 값)

Code example:

LocalStorage.setitem ( "사이트", "js8.in");

getitem은 가치를 얻습니다

목적 : 지정된 키에 로컬로 저장된 값을 가져옵니다.

사용법 : .getItem (키)

Code example:

var site = localStorage.getItem ( "사이트");

removeItem 삭제 키

목적 : 지정된 키에 로컬로 저장된 값 삭제

사용법 : .removeItem (키)

Code example:

LocalStorage.removeItem ( "사이트");

모든 키/값을 지우십시오

목적 : 모든 키/값을 지우십시오

사용법 : .Clear ()

Code example:

localStorage.clear ();

4. 기타 작동 방법 : 포인트 작동 및 []

웹 스토리지는 자체 setitem, getItem 등을 사용할뿐만 아니라 액세스를 용이하게 할 수있을뿐만 아니라 다음 코드와 같은 일반 객체와 같은 데이터를 저장하기 위해 DOT (.) 연산자 및 [] 메소드를 사용할 수 있습니다.

var Storage = Window.localstorage; Storage.key1 = "Hello";

스토리지 [ "key2"] = "world";

Console.log (Storage.key1);

console.log (스토리지 [ "key2"]);

5. LocalStorage 및 SessionStorage의 키 및 길이 특성은 트래버스를 위해 구현됩니다.

SessionStorage 및 LocalStorage가 제공하는 키 () 및 길이는 다음 코드와 같은 저장된 데이터 트래버스를 쉽게 구현할 수 있습니다.

var Storage = Window.localstorage;

for (var i = 0, len = Storage.length; i <len; i ++)

{

var key = Storage.key (i);

var value = Storage.getItem (키);

console.log (key + "=" + 값);

}

6. 스토리지 이벤트

스토리지는 또한 스토리지 이벤트를 제공합니다. 키 값이 변경되거나 명확 해지면 스토리지 이벤트가 트리거 될 수 있습니다. 예를 들어 다음 코드는 스토리지 이벤트 변경을 듣습니다.

window.addeventListener ( "스토리지", handle_storage, false);

}

else if (window.attachevent)

{

window.attachevent ( "onstorage", handle_storage);

}

함수 핸들 _storage (e) {

if (! e) {e = window.event;}

}

스토리지 이벤트 객체의 특정 속성은 다음과 같습니다.

PropertyTypedErscription

키 스트링 (Keystring)은 추가, 제거 또는 수정 된 명명 된 키입니다

OldValueAnyy 이전 값 (현재 덮어 쓰기) 또는 새 항목이 추가 된 경우 NULL

NewValueAny the New Value 또는 항목이 추가 된 경우 NULL

URL/URSTRING이 변경을 유발 한 메소드라고하는 페이지