HTML5 저장 방법 sessionStorage 및 localStorage에 대한 자세한 설명

이 글에서는 HTML5의 저장 방식인 sessionStorage와 localStorage에 대한 자세한 설명을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

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

코드를 복사합니다.

코드는 다음과 같습니다.

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

3. LocalStorage 및 sessionStorage 작업
localStorage 및 sessionStorage는 setItem, getItem 및 RemoveItem 등과 같은 동일한 작업 방법을 갖습니다.
localStorage 및 sessionStorage의 메소드:
setItem은 값을 저장합니다.
목적: 키 필드에 값을 저장합니다.
사용법: .setItem(key, value)
코드 예:

코드 복사

코드는 다음과 같습니다.

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

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

코드 복사

코드는 다음과 같습니다.

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. 기타 연산 방법: 포인트 연산과 []
Web Storage는 편리한 접근을 위해 자체 setItem, getItem 등을 사용할 수 있을 뿐만 아니라, 점(.) 다음 코드와 같이 일반 객체처럼 데이터를 저장하는 연산자 및 []:

코드 복사

코드는 다음과 같습니다.

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

5. localStorage 및 sessionStorage의 키 및 길이 속성은 순회를 구현합니다.
sessionStorage와 localStorage에서 제공하는 key()와 길이는 다음 코드와 같이 저장된 데이터 탐색을 쉽게 구현할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

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); 
}

6. 저장 이벤트
스토리지는 키 값이 변경되거나 삭제되면 스토리지 이벤트가 트리거될 수 있습니다. 예를 들어 다음 코드는 스토리지 이벤트 변경에 대한 리스너를 추가했습니다.

코드 복사

코드는 다음과 같습니다.

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;}  
}

저장 이벤트 개체의 구체적인 속성은 다음과 같습니다.

Property	Type	Description
key	String	추가, 제거 또는 수정된 명명된 키
oldValue	Any	이전 값(이제 덮어씀) , 또는 새 항목이 추가된 경우 null
newValue	Any	새 값 또는 항목이 추가된 경우 null
url/uri	String	트리거된 메서드를 호출한 페이지 이번 변경

관련 권장 사항:

모든 HTML5 태그 요약 및 태그 의미 설명

위 내용은 HTML5 저장 방법 sessionStorage 및 localStorage에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!