html5의 sessionStorage와 localStorage에 대한 자세한 설명과 사용법

html5의 웹 저장소에는 sessionStorage와 localStorage라는 두 가지 저장 방법이 있습니다.

sessionStorage는 세션에 데이터를 로컬로 저장하는 데 사용됩니다. 이러한 데이터는 동일한 세션의 페이지에서만 액세스할 수 있으며 세션이 끝나면 데이터가 삭제됩니다. 따라서 sessionStorage는 영구 로컬 저장소가 아니며 세션 수준 저장소일 뿐입니다.

LocalStorage는 영구 로컬 저장소로 사용됩니다. 데이터가 적극적으로 삭제되지 않는 한 데이터는 만료되지 않습니다.

웹 스토리지와 쿠키의 차이점

웹 스토리지는 쿠키와 개념은 비슷하지만, 더 큰 용량을 저장하도록 설계되었다는 차이점이 있습니다. 쿠키의 크기는 제한되어 있으며 새 페이지를 요청할 때마다 쿠키가 전송되므로 대역폭이 낭비됩니다. 또한 쿠키는 범위를 지정해야 하며 도메인 간에 호출할 수 없습니다.

또한 Web Storage에는 setItem, getItem, RemoveItem,clear 및 기타 메소드가 있습니다. 쿠키와 달리 프런트엔드 개발자는 setCookie 및 getCookie를 직접 캡슐화해야 합니다. html5 웹 스토리지에 대한 브라우저 지원

IE7 이하를 제외하고 다른 표준 브라우저는 완벽하게 지원됩니다(즉, FF는 웹 서버에 설치해야 함)(실행)). 예를 들어 IE7과 IE6의 UserData는 실제로 자바스크립트 로컬 저장소를 위한 솔루션입니다. 간단한 코드 캡슐화를 통해 모든 브라우저를 통합하여 웹 스토리지를 지원할 수 있습니다.

브라우저가 localStorage를 지원하는지 확인하려면 다음 코드를 사용할 수 있습니다.

localStorage 및 sessionStorage 작업

if(window.localStorage){     
    alert("浏览支持localStorage");
}else{    
    alert("浏览暂不支持localStorage");
} //或者 
if(typeof window.localStorage == 'undefined'){ 
    alert("浏览暂不支持localStorage");
}

localStorage와 sessionStorage는 모두 동일한 작업 방법을 가집니다.

localStorage 및 sessionStorage 메서드

setItem은 값을 저장합니다

사용: 키 필드에 값 저장

사용: .setItem ( key, value )

코드 예:

getItem이 값을 가져옵니다

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

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

사용법: .getItem(key)

코드 예:

removeItem 삭제 키

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

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

사용법: .removeItem(key)

코드 예 :

clear 모든 키/값 지우기

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

목적: 모든 키/값 지우기

사용법: .clear()

코드 예:

기타 연산 방법 : 도트 연산 및 []

sessionStorage.clear(); localStorage.clear();

웹 스토리지 자체의 setItem, getItem 등을 사용하여 편리하게 접근할 수 있을 뿐만 아니라 도트(.) 연산자와 []를 사용하여 다음과 같은 코드로 데이터를 저장합니다.

localStorage와 sessionStorage의 키와 길이 속성은 순회를 구현합니다.

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);

sessionStorage와 localStorage에서 제공하는 key()와 길이는 편리하게 사용할 수 있습니다. 예를 들어 저장된 데이터 탐색을 구현합니다.

storage 이벤트

var storage = window.localStorage; for (var i=0, len = storage.length; i  <  len; i++){     
var key = storage.key(i);     var value = storage.getItem(key);     console.log(key + "=" + value); 
}

Storage는 키 값이 변경되거나 지워지면 저장소 이벤트도 트리거할 수 있습니다. 예를 들어 다음 코드가 추가됩니다. 스토리지 이벤트 변경 모니터링:

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

if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); 
}else if(window.attachEvent){ 
window.attachEvent("onstorage",handle_storage); 
} 
function handle_storage(e){ 
if(!e){e=window.event;
}
}

속성 유형 설명

key String 추가, 제거 또는 수정된 명명된 키  

oldValue  Any  이전 값(이제 덮어씀) 또는 새 항목이 추가된 경우 null  

newValue  Any  새 값, 또는 항목이 추가된 경우 null  

url/uri 문자열 이 변경을 촉발한 메소드를 호출한 페이지

Web Storage Demo

HTML5 데모: 스토리지 웹 스토리지 예시