의견 :이 기사는 주로 HTML5 로컬 스토리지에 대한 LocalStorage, SessionStorage, Traversal Operations, Exception Handling 등의 기본 사용법을 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
HTML5의 로컬 스토리지 API의 로컬 스터리지는 SessionStorage와 동일하며, 차이점은 페이지를 닫은 후 SessionStorage가 지워지고 LocalStorage는 항상 저장됩니다. HTML5의 로컬 저장을 간단히 소개하고 Traversal과 같은 일반적인 문제에 대한 몇 가지 예를 들어 LocalStorage를 예로 들어 보겠습니다. LocalStorage는 로컬로 저장된 HTML5입니다. 키 값 쌍을 사용하여 데이터에 액세스하고 액세스 된 데이터는 문자열 일 수 있습니다. 브라우저는 사용 방법, 최대 저장 공간 등과 같은이 API를 지원합니다.
1. LocalStorage API의 기본 사용 방법
LocalStorage API는 이해하기 쉽습니다. 다음은 일반적인 API 작업 및 예입니다. 데이터 설정 : localStorage.setItem (키, 값); 예:
for (var i = 0; i <10; i ++) {
LocalStorage.setitem (i, i);
}
데이터 가져 오기 : localStorage.getItem (키) 모든 데이터 가져옵니다 : localStorage.Valueof () 예 :
LocalStorage.getItem (i);
}
데이터 삭제 : localStorage.removeItem (키) 예 :
LocalStorage.removeItem (i);
}
모든 데이터를 지우기 : localStorage.clear () 로컬 저장된 데이터 수를 가져옵니다. LocalStorage.length Nth 데이터의 핵심 값을 얻으십시오 : 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의 로컬 스토리지 크기에 제한이 있습니다. 테스트 결과는 다음과 같습니다.
Firefox 22.0> 5242875 + 5 = 5242880
크롬 28.0> 2621435 + 5 = 2621440
사파리 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m (초과하는 경우 더 많은 공간에 대한 요청을 허용하는 대화 상자가 나타납니다)
테스트 코드 참조 :
<! doctype html>
<html>
<헤드>
<cript>
함수 로그 (msg) {
Console.log (MSG);
경고 (MSG);
} </p> <p> var 한계;
var half = '1'; // 이것은 중국어로 변경되어 다시 실행됩니다
var str = 반;
var strtr;
(1) {
노력하다 {
localStorage.clear ();
str += 반;
LocalStorage.setitem ( '캐시', str);
반 = str;
} catch (ex) {
부서지다;
}
}
var base = str.length;
var Off = base / 2;
var isleft = 1;
while (Off) {
if (isleft) {
끝 =베이스 - (OFF / 2);
} 또 다른 {
end = base + (Off / 2);
} </p> <p> sstr = str.slice (0, end);
localStorage.clear ();
노력하다 {
LocalStorage.setitem ( '캐시', str);
한계 = strtr.length;
isleft = 0;
} catch (e) {
isleft = 1;
} </p> <p>베이스 = 끝;
OFF = Math.floor (Off / 2);
} </p> <p> log ( 'limit :' + limit);
</스크립트>
</html>
3.2 데이터 저장 예외 처리
노력하다{
localStorage.setItem (키, 값);
} catch (oexception) {
if (oexception.name == 'quotaexceedEderror') {
Console.log ( '로컬 스토리지 한도를 초과했습니다!');
// 역사적 정보가 중요하지 않은 경우 지우고 설정할 수 있습니다.
localStorage.clear ();
localStorage.setItem (키, 값);
}
}