H5 localStorage 사용량 요약

이번에는 H5의 localStorage 사용에 대한 요약을 가져오겠습니다. localStorage 사용 시 주의사항은 무엇인가요?

1. localStorage란, sessionStorage

HTML5에 새로운 localStorage 기능이 추가되었습니다. 이 기능은 주로 로컬 저장소로 사용되며 쿠키 저장 공간 부족 문제를 해결합니다. 쿠키의 각 쿠키 공간은 4k입니다. 일반적으로 브라우저는 localStorage에서 5M 크기를 지원합니다. 이 localStorage는 브라우저마다 다릅니다.

2. localStorage의 장점과 한계

localStorage의 장점

1. localStorage는 쿠키의 4K 제한을 확장합니다

2. 쿠키와 비교하여 대역폭을 절약할 수 있지만 이는 상위 버전의 브라우저에서만 지원됩니다. 브라우저 크기는 일정하지 않으며 위의 IE 버전에서만 가능합니다. IE8은 localStorage 속성을 지원합니다. 2. 현재 모든 브라우저는 localStorage의 값 유형을 문자열 유형으로 제한합니다. 이는 일상적인 일반적인 JSON 객체에 적용 가능합니다.

3 LocalStorage는 개인 정보 보호 모드에서 읽을 수 없습니다. 4. LocalStorage는 기본적으로 문자열을 읽습니다. 저장된 콘텐츠가 많으면 메모리 공간을 소모하여 페이지가 중단됩니다.

5. LocalStorage는 크롤러에서 크롤링할 수 없습니다.유일한 차이점은 다음과 같습니다. localStorage와 sessionStorage 사이에는 localStorage가 영구 저장소인 반면 sessionStorage는 세션이 끝나면 sessionStorage의 키-값 쌍이 지워집니다.

여기서는 localStorage를 사용하여 분석합니다.

3. localStorage 사용

localStorage에 대한 브라우저 지원:

여기서 특별한 설명은

IE browser

를 사용하는 경우 UserData가 필요하다는 것입니다. 저장소로서 여기서 주요 설명은 localStorage의 내용이므로 userData 블로거의 개인적인 의견으로는 현재 IE6/IE7이 더 이상 사용되지 않으며 오늘날의 많은 페이지 개발에는 Html5CSS3과 같은 새로운 기술이 포함될 것이기 때문에 UserData의 사용법을 배울 필요가 없습니다. 일반적으로 사용할 때는 호환되지 않습니다우선 localStorage를 사용할 때 브라우저가 localStorage를 지원하는지 확인해야 합니다.

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

localStorage 속성을 작성하는 방법에는 세 가지가 있습니다.

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를 공유할 수 없습니다.

최종 결과는 다음과 같습니다. console is:방금 저장된 유형이 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를 삭제하고 수정하는 두 단계

이 단계를 변경하는 것은 전역 변수의 값을 변경하는 것과 동일한 개념입니다. 여기서는 간단히 설명하기 위해 예를 들어보겠습니다. 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、 将localStorage中的某个键值对删除

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()方法，向其中出入索引即可获取对应的键

四、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对象

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5的存储方式详解

postMessage实现跨域、跨窗口消息传递

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