집 >웹 프론트엔드 >H5 튜토리얼 >localStorage와 sessionStorage를 사용하는 방법

localStorage와 sessionStorage를 사용하는 방법

php中世界最好的语言원래의: 2018-01-11 10:00:322706검색

이번에는 localStorage와 sessionStorage 사용법을 알려드리겠습니다. localStorage와 sessionStorage 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

1. localStorage와 sessionStorage란 무엇입니까

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

2. localStorage의 장점과 한계

localStorage의 장점

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

2. localStorage는 처음 요청한 데이터를 5M 크기에 해당하는 로컬에 직접 저장할 수 있습니다. 프런트 엔드 페이지는 쿠키에 비해 대역폭을 절약할 수 있지만 이는 상위 버전의 브라우저에서만 지원됩니다

localStorage의 제한 사항

1. 브라우저의 크기는 균일하지 않으며 IE8에서는 위의 IE 버전에서만 localStorage 속성을 지원합니다.

2 현재 모든 브라우저는 localStorage의 값 유형을 문자열 유형으로 제한합니다. 이를 위해서는 일상적인 JSON 객체 유형에 대한 일부 변환이 필요합니다

3. 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{
            //主逻辑业务

localStorage的写入，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"]);
        }

독자들이 이를 알아차렸는지 모르겠습니다. 예, 방금 저장된 것은 int 유형이었습니다. 하지만 문자열 형식으로 인쇄되었습니다. 이는 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를 삭제하고 수정하는 두 단계에 대해

이 단계를 변경하는 것은 전역 변수의 값을 다시 변경하는 것과 같은 개념입니다. 여기서는 간단히 설명하기 위해 예를 들어보겠습니다. 읽기 당신은 사례 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!