HTML5 localStorage 지식 포인트 요약

이 글에서는 주로 HTML5 localStorage에 대한 지식을 요약하여 공유합니다. HTML5에는 새로운 localStorage 기능이 추가되었습니다. 이 기능은 주로 로컬 저장소로 사용되며 쿠키 저장 공간이 부족한 문제를 해결합니다. 쿠키 쿠키의 저장 공간은 4k이며, 일반 브라우저는 localStorage에서 5M 크기를 지원합니다. 이 localStorage는 브라우저마다 다릅니다. 1. localStorage와 sessionStorage란 무엇입니까? HTML5에 이 기능이 추가되었습니다. 쿠키 저장 공간 부족 문제를 해결하기 위해 주로 로컬 저장소로 사용됩니다(쿠키의 각 쿠키 저장 공간은 4k입니다). 일반적으로 브라우저는 localStorage 크기에서 5M를 지원하며, 이 localStorage는 브라우저마다 다릅니다.

2. localStorage의 장점과 한계

localStorage의 장점

1. localStorage는 쿠키의 4K 제한을 확장합니다2. 쿠키에 비해 대역폭을 절약할 수 있지만 이는 상위 버전의 브라우저에서만 지원됩니다. 브라우저의 제한 사항

1. 크기가 일정하지 않으며 localStorage 속성은 다음과 같습니다. IE8 이상의 IE 버전에서만 지원됩니다. 2. 현재 모든 브라우저는 localStorage의 값 유형을 문자열 유형으로 제한합니다. 이는 일부 변환

3에서 LocalStorage를 읽을 수 없습니다. 4. LocalStorage는 본질적으로 문자열을 읽습니다. 저장된 콘텐츠가 많으면 메모리 공간을 소모하고 페이지가 멈추게 됩니다.

5. LocalStorage는 크롤러가 크롤링할 수 없습니다.

localStorage의 유일한 차이점은 다음과 같습니다. sessionStorage는 localStorage가 영구 저장소인 반면 sessionStorage는 세션이 끝나면 sessionStorage의 키-값 쌍이 지워집니다. 여기서는 localStorage를 사용합니다.

3. localStorage

localStorage에 대한 브라우저 지원:

여기서 특별한 설명은 IE 브라우저를 사용하는 경우 UserData가 저장소로 사용된다는 것입니다. 여기서 설명하는 것은 localStorage의 콘텐츠이므로 userData는 너무 많이 설명하지 마세요. 블로거의 개인적인 의견으로는 현재 IE6/IE7이 제거 단계에 있기 때문에 UserData의 사용법을 배울 필요가 없으며 오늘날의 많은 페이지 개발에는 Html5CSS3, 따라서 일반적으로 위의 내용을 사용할 때 호환되지 않습니다. 먼저 localStorage를 사용할 때 브라우저가 localStorage 속성을 지원하는지 확인해야 합니다.

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }

여기서는 세 가지 방법이 있습니다. 하나씩 소개하겠습니다

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

실행 후 결과는 다음과 같습니다.

여기서 주의해야 할 점은 localStorage 사용 역시 동일 출처 정책을 따르기 때문에 서로 다른 웹사이트가 동일한 localStorage를 공유할 수는 없습니다

콘솔에 인쇄된 최종 결과는 다음과 같습니다.

방금 저장된 유형이 int라는 것을 독자들이 알아차렸을지는 모르겠지만, 인쇄된 유형은 string입니다. 이는 localStorage 자체의 특성과 관련이 있으며 문자열 유형만 지원합니다. 저장.

localStorage 읽기

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }

localStorage를 읽는 방법에는 세 가지가 있습니다. 그 중 공식적으로 권장되는 두 가지 방법은 getItemsetItem에 액세스하는 것입니다. 왜인지는 모르겠습니다.

앞서 localStorage는 프론트엔드 데이터베이스와 동일하다고 말씀드렸습니다. 데이터베이스는 주로 추가, 삭제, 확인의 4단계로 구성되어 있습니다. 여기서 읽고 쓰는 것은 추가 및 확인의 2단계와 동일합니다

이제 이야기해 보겠습니다. localStorage를 삭제하고 수정하는 두 단계

이 단계를 변경하는 것은 전역 변수의 값을 변경하는 것과 동일합니다. 여기서는 간단히 설명하기 위해 예를 들어 보겠습니다.

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }

콘솔에서는 a 키가 4

로 변경된 것을 확인할 수 있습니다. localStorage

1. localStorage

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);

2의 모든 내용을 삭제합니다.

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

에서 키-값 쌍을 삭제합니다.

콘솔에서 결과 보기

localStorage의 키 가져오기

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }

key() 메소드를 사용하여 해당 키를 가져오려면 인덱스를 입력하고 종료하세요

4 localStorage에 대한 기타 참고 사항

일반적으로 JSON을 localStorage에 저장하지만 localStorage는 자동으로 localStorage를 문자열 형식으로 변환합니다

이제 JSON.stringify() 메서드를 사용하여 JSON을 JSON 문자열로 변환할 수 있습니다.

예:

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

打印出来是Object对象

另外还有一点要注意的是，其他类型读取出来也要进行转换

相关推荐：

html5中LocalStorage本地存储的示例

HTML5本地存储应用sessionStorage和localStorage

localStorage与sessionStorage五种循序渐进的使用方法

위 내용은 HTML5 localStorage 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!