Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)

黄舟

Jan 22, 2017 am 11:57 AM

1. 브라우저 스토리지의 개발 역사

Flash SharedObject, Google Gears, Cookie, DOM Storage, User Data, window.name, Silverlight, Open Database 등 다양한 로컬 스토리지 솔루션이 있습니다. .

인터넷에서 사진을 빌려 현재 주류 로컬 스토리지 솔루션을 살펴보세요.

Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)

쿠키: 웹에서 널리 사용되지만 매우 제한적입니다. 일부 사이트에서는 보안상의 이유로 쿠키를 비활성화합니다. 쿠키의 내용은 페이지 요청과 함께 서버로 전송됩니다.

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 브라우저 호환성은 다음과 같습니다.

Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)

2. HTML5 localStorage 작업에서는

HTML5에서 로컬 저장소는 localStorage와 sessionStorage를 포함하는 창 속성입니다. 전자는 항상 로컬에 존재합니다. 세션에만 동반되며 창이 닫히면 사라집니다. 둘의 사용법은 완전히 동일합니다.

이전에는 쿠키가 이 모든 작업을 수행했습니다. 그러나 쿠키는 요청이 있을 때마다 서버에 전달되므로 쿠키가 느리고 비효율적이므로 대량의 데이터를 저장하는 데 적합하지 않습니다.

HTML5에서는 모든 서버 요청에 의해 데이터가 전달되지 않고, 대신 요청될 때만 데이터가 사용됩니다. 이를 통해 웹사이트 성능에 영향을 주지 않고 많은 양의 데이터를 저장할 수 있습니다.

웹사이트마다 데이터가 저장되는 위치가 다르며 웹사이트는 자체 데이터에만 액세스할 수 있습니다.

HTML5는 JavaScript를 사용하여 데이터를 저장하고 액세스합니다.

localStorage 메소드로 저장한 데이터에는 시간 제한이 없습니다. 데이터는 다음 날, 다음 주 또는 연도 이후에도 계속 사용할 수 있습니다. localStorage에는 로컬 저장소를 설정하고 액세스하는 세 가지 방법이 있습니다.

localStorage.t1 ="건조 믹스 큰 그릇";

localStorage["t2"]="HTML5";

localStorage .setItem("t3","http://blog.csdn.NET/dawanganban");

localStorage.t1 ;

localStorage["t2"];

localStorage.getItem("t3");

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<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>

로그인 후 복사

위의 세 줄의 할당 코드를 주석 처리하면 다음을 알 수 있습니다. 데이터는 여전히 브라우저에 표시될 수 있습니다.

Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)

위 할당 및 검색을 처리하는 것 외에도 localStorage에는 다음과 같은 사용법도 있습니다.

localStorage.removeItem(); //지우기

localStorage.clear() //모두 지우기

localStorage.length //얻을 키 수

localStorage.key() //저장된 키 내용 가져오기

<!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[&#39;t2&#39;]="<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>

로그인 후 복사

Xiaoqiang의 HTML5 모바일 개발 도로(19) - HTML5 Local Storage(로컬 스토리지)