Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)
- 黄舟원래의
- 2017-01-22 11:57:291283검색
1. 브라우저 스토리지의 개발 역사
Flash SharedObject, Google Gears, Cookie, DOM Storage, User Data, window.name, Silverlight, Open Database 등 다양한 로컬 스토리지 솔루션이 있습니다. .
인터넷에서 사진을 빌려 현재 주류 로컬 스토리지 솔루션을 살펴보세요.
쿠키: 웹에서 널리 사용되지만 매우 제한적입니다. 일부 사이트에서는 보안상의 이유로 쿠키를 비활성화합니다. 쿠키의 내용은 페이지 요청과 함께 서버로 전송됩니다.
Flash SharedObject: Kissy의 저장 모듈은 Flash SharedObject를 호출하는 데 사용됩니다. Flash SharedObject의 장점은 적당한 용량을 가지며 기본적으로 호환성 문제가 없다는 것입니다. 단점은 페이지에 특정 swf 및 js 파일을 도입해야 하므로 추가적인 부담이 가중되고 일부 시스템에서는 처리가 번거롭다는 것입니다. 플래시 운영 환경.
Google Gears: Google의 오프라인 솔루션 업데이트가 중단되었습니다. 공식적인 권장 사항은 HTML5 localStorage 솔루션을 사용하는 것입니다.
사용자 데이터 : 마이크로소프트가 IE용 시스템에서 특별히 오픈한 저장공간이므로 Windows+IE 조합만 지원한다. 실제 테스트는 2000(IE5.5), XP(IE6)에서 이루어졌다. , IE7) Vista(IE7)에서는 정상적으로 사용 가능합니다. XP에서는 일반적으로 C:Documents and Settings 사용자 이름 UserData에 위치하며 때로는 C:Documents and Settings 사용자 이름 Application DataMicrosoftInternet ExplorerUserData에 위치합니다. Vista에서는 C:Users usernameAppDataRoamingMicrosoftInternet ExplorerUserData에 있습니다. 단일 파일의 크기 제한은 128KB이며, 하나의 도메인 이름에 총 1024KB의 파일을 저장할 수 있으며 파일 수에는 제한이 없습니다. 제한된 사이트에서는 이 두 값이 각각 64KB와 640KB이므로, 여러 가지 상황을 고려한다면 64KB 이하의 단일 파일을 관리하는 것이 가장 좋습니다.
localStorage: 위의 로컬 저장소 솔루션과 비교할 때 localStorage는 고유한 장점이 있습니다. 대용량, 사용하기 쉬움, 강력하고 기본 지원 단점은 호환성이 좋지 않습니다(chrome, safari, firefox, IE 9, IE8). 모두 localStorage를 지원하며 주로 IE8 이하 버전에서는 지원되지 않으며 보안 수준이 낮습니다(따라서 민감한 정보를 저장하기 위해 localStorage를 사용하지 마십시오).
HTML5의 localStorage 브라우저 호환성은 다음과 같습니다.
2. HTML5 localStorage 작업에서는
<!DOCTYPE HTML>
<html>
<head>
<meta charset="urf-8"/>
</head>
<body>
<script type="text/javascript">
//判断浏览器是否支持本地存储
if(window.localStorage){
localStorage.t1="大碗干拌";
document.write(localStorage.t1);
localStorage['t2']="<br/>hello word"
document.write(localStorage.t2);
localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");
document.write(localStorage.t3);
}else{
alert("你的浏览器不支持");
}
</script>
</body>
</html>위의 세 줄의 할당 코드를 주석 처리하면 다음을 알 수 있습니다. 데이터는 여전히 브라우저에 표시될 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="urf-8"/>
</head>
<body>
<script type="text/javascript">
//判断浏览器是否支持本地存储
if(window.localStorage){
//先清除一下
localStorage.clear();
localStorage.t1="大碗干拌";
document.write(localStorage.t1);
localStorage['t2']="<br/>hello word"
document.write(localStorage.t2);
localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");
document.write(localStorage.t3);
//清除t2 全部清除用clear
localStorage.removeItem("t2");
for(var i=0;i<localStorage.length;i++){
document.write("<br/>" + localStorage.key(i) + "___"+localStorage.getItem(localStorage.key(i)));
}
}else{
alert("你的浏览器不支持");
}
</script>
</body>
</html>
