HTML5 저장 방법 sessionStorage 및 localStorage_html5 튜토리얼 기술에 대한 자세한 설명

따라서 sessionStorage는 영구 로컬 저장소가 아니며 세션 수준 저장소일 뿐입니다. LocalStorage는 데이터가 적극적으로 삭제되지 않는 한 영구 로컬 저장소에 사용됩니다.
1. 웹 저장소와 쿠키의 차이점
웹 저장소는 쿠키와 개념은 유사하지만 더 큰 용량을 저장하도록 설계되었다는 차이점이 있습니다. 쿠키의 크기는 제한되어 있으며 새 페이지를 요청할 때마다 쿠키가 전송되므로 대역폭이 낭비됩니다. 또한 쿠키는 범위를 지정해야 하며 도메인 간에 호출할 수 없습니다.
또한 Web Storage에는 setItem, getItem, RemoveItem, Clear 및 기타 메소드가 있습니다. 쿠키와 달리 프런트엔드 개발자는 setCookie 및 getCookie 자체를 캡슐화해야 합니다.
그러나 쿠키도 필수입니다. 쿠키는 서버와 상호 작용하는 데 사용되고 HTTP 사양의 일부로 존재하는 반면, 웹 저장소는 데이터를 로컬에 "저장"하기 위해서만 생성됩니다(@otakustay의 수정)
2. html5 웹 스토리지에 대한 브라우저 지원
IE7 이하를 제외하고 다른 표준 브라우저는 완벽하게 지원됩니다(예: FF는 웹 서버에 있어야 함). 실행). IE는 항상 잘 작동한다는 점을 언급할 가치가 있습니다. 예를 들어 IE7 및 IE6의 UserData는 실제로 javascript 로컬 저장소를 위한 솔루션입니다. 간단한 코드 캡슐화를 통해 모든 브라우저를 통합하여 웹 스토리지를 지원할 수 있습니다.
브라우저가 localStorage를 지원하는지 확인하려면 다음 코드를 사용할 수 있습니다.

코드 복사

코드

if(window.localStorage){
Alert("탐색은 localStorage를 지원합니다.")
}
else
{
Alert("탐색은 로컬 저장소를 지원하지 않습니다." localStorage")
}
//or if(typeof window.localStorage == 'undefine'){ Alert("브라우징은 아직 localStorage를 지원하지 않습니다.") }

3. LocalStorage 및 sessionStorage 작업
localStorage와 sessionStorage는 모두 setItem, getItem, RemoveItem 등의 작업 방법이 동일합니다.
localStorage 및 sessionStorage의 방법:
setItem은 값을 저장합니다
사용: Store 키 필드에 값
사용법: .setItem(key, value)
코드 예:

코드 복사

코드는 다음과 같습니다:

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem이 값을 얻습니다
목적: 지정된 키를 로컬로 가져옵니다. 저장된 값
사용법: .getItem(key)
코드 예:

복사 code

코드는 다음과 같습니다.

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

removeItem 삭제 키
목적: 지정된 키 로컬에 저장된 값 삭제
사용법: .removeItem(key)
코드 예:

코드 복사

코드는 다음과 같습니다.

sessionStorage.removeItem("key")
localStorage.removeItem("site");

clear 모든 키/값 지우기
목적: 모든 키/값 지우기
사용법: .clear()
코드 예:

코드 복사

코드는 다음과 같습니다.

sessionStorage.clear()
localStorage.clear();

4 기타 연산 방법: 포인트 연산 및 []
웹 스토리지 자체 setItem, getItem 등을 사용하여 편리하게 접근할 수 있을 뿐만 아니라 도트(.) 연산자와 []를 사용하여 사용할 수도 있습니다. 다음 코드와 같이 일반 객체처럼 데이터를 저장합니다.

코드 복사

코드는 다음과 같습니다.

var 저장 = window.localStorage; 저장.key1 = "hello";
저장["key2"] = "세계";
console.log(storage.key1); console.log(storage["key2"]);

5. localStorage sessionStorage의 키 및 길이 속성을 사용하여 순회를 구현합니다.
sessionStorage 및 localStorage는 다음 코드와 같이 저장된 데이터의 순회를 쉽게 구현할 수 있습니다.

코드 복사코드는 다음과 같습니다.

var 저장 = window.localStorage;
for (var i=0, len = 저장.길이; i < len; i )
{
var key = 저장.키( i);
var value = Storage.getItem(key);
console.log(key "=" value)

6. 스토리지는 키 값이 변경되거나 지워지면 스토리지 이벤트가 트리거될 수도 있습니다. 예를 들어 다음 코드는 스토리지 이벤트 변경에 대한 리스너를 추가합니다. >
코드 복사

코드는 다음과 같습니다.

if(window.addEventListener){ window.addEventListener("storage",handle_storage, false); }else if(window.attachEvent)

{

window.attachEvent("onstorage",handle_storage)

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

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