HTML5 로컬 저장소 localStorage, sessionStorage 기본 사용법, 순회 작업, 예외 처리 등

HTML5의 로컬 저장소 API에서 localStorage와 sessionStorage의 사용 방법은 동일합니다. 차이점은 sessionStorage는 페이지를 닫은 후 지워지는 반면 localStorage는 항상 저장된다는 것입니다. 여기서는 localStorage를 예로 들어 HTML5의 로컬 저장소를 간략하게 소개하고 순회와 같은 일반적인 문제에 대한 몇 가지 예를 제공합니다. localStorage는 키-값 쌍을 사용하여 데이터에 액세스하는 HTML5 로컬 스토리지 API입니다. 브라우저마다 사용 방법, 최대 저장 공간 등과 같이 이 API에 대한 지원이 다릅니다.

1. localStorage API 기본 사용법

localStorage API의 사용법은 간단하고 이해하기 쉽습니다. 다음은 일반적인 API 작업 및 예입니다. 데이터 설정: localStorage.setItem(key,value) 예:

코드 복사

코드는 다음과 같습니다.

for(var i=0; i<10; i){
localStorage .setItem(i,i) ;
}

데이터 가져오기: localStorage.getItem(key) 모든 데이터 가져오기: localStorage.valueOf() 예:

코드 복사

코드는 다음과 같습니다.

for(var i=0; i<10; i){
localStorage.getItem( i);
}

데이터 삭제: localStorage.removeItem(key) 예:

코드 복사

코드는 다음과 같습니다.

for(var i=0; i<5; i ){
localStorage.removeItem(i);
}

지우기 모든 데이터: localStorage.clear() 로컬 저장소 데이터 수를 가져옵니다. ：localStorage.length N번째 데이터의 키 값을 가져옵니다: localStorage.key(N)

2. 트래버스 키 키 값 방식

코드 복사

코드

for(var i=localStorage.length - 1; i >=0; i--){
console.log('(i 1) '번째 데이터 키 값은 ' localStorage.key(i) ', 데이터는 ' localStorage.getItem(localStorage.key(i)));
}

3. 저장소 크기 제한 테스트 및 예외 처리

3.1 데이터 저장 용량 제한 테스트

기본적으로 브라우저마다 HTML5의 로컬 저장 크기에 제한이 있습니다. 테스트 결과는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

IE 9 > 4999995 5 = 5000000
firefox 22.0 > 5242875 5 = 5242880
chrome 28.0 >
사파리 5.1 > 2621435 5 = 2621440
opera 12.15 > 5M (초과할 경우 추가 공간을 요청하는 대화 상자가 나타납니다)

테스트 코드 참고:

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

3.2 데이터 저장 예외 처리

코드 복사

코드는 다음과 같습니다.

시도{
localStorage .setItem( 키, 값);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('로컬 저장소 한도를 초과했습니다!');
// 과거 정보가 더 이상 중요하지 않다면 삭제한 후 다시 설정할 수 있습니다.
localStorage.clear();
localStorage.setItem(key, value);
}
}

HTML5 로컬 저장소 localStorage, sessionStorage 기본 사용법, 순회 작업, 예외 처리 등_html5 튜토리얼 기술