localStorage 및 sessionStorage 사용 요약

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

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

2. LocalStorage는 첫 번째 요청 데이터를 로컬에 직접 저장할 수 있습니다. 이는 프런트 엔드 페이지의 5M 데이터베이스와 동일하며, 쿠키와 비교하면 대역폭을 절약할 수 있지만 이는 Zhongcai에서만 지원됩니다.

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

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

3. 브라우저의 개인정보 보호 모드에서는 localStorage를 읽을 수 없습니다.

4. LocalStorage는 기본적으로 문자열을 읽습니다. 많은 양의 콘텐츠를 저장하면 메모리 공간이 소모되고 페이지가 중단될 수 있습니다.

5. 크롤러는 localStorage를 크롤링할 수 없습니다.

localStorage와 sessionStorage의 유일한 차이점은 localStorage는 영구 저장소에 속하고 sessionStorage는 sessionStorage에 속한다는 것입니다. 세션이 끝나면 sessionStorage의 키-값 쌍이 지워집니다.

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

localStorage에 대한 브라우저 지원:

여기서 특별한 설명은 IE 브라우저를 사용하는 경우 UserData가 저장소로 사용된다는 것입니다. 여기서 주요 설명은 localStorage의 내용이므로 userData는 너무 많이 설명되지 않으며 블로거의 개인적인 의견으로는 없습니다. 현재 IE6/IE7은 제거 단계에 있고 오늘날 많은 페이지 개발에는 HTML5/CSS3과 같은 새로운 기술이 포함되어 있으므로 일반적으로 호환성을 위해 UserData를 사용하지 않기 때문에 UserData의 사용법을 배우는 것이 필요합니다.

먼저 localStorage를 사용할 때 브라우저가 localStorage 속성을 지원하는지 확인해야 합니다.

 if(!window.localStorage){ 경고(브라우저는 로컬 저장소를 지원합니다); return false }else{ //주요 논리 사업}

localStorage에 쓰는 방법은 3가지가 있습니다. 여기서는 하나씩 소개하겠습니다.

 if(!window.localStorage){ 경고(브라우저는 localstorage를 지원합니다); return false; }else{ var Storage=window.localStorage; //필드 쓰기 a=1; ; //c 필드를 작성합니다. 저장[c]) }

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

여기서는 localStorage 사용도 동일 출처 정책을 따르므로 서로 다른 웹사이트가 동일한 localStorage를 직접 공유할 수 없다는 점에 유의해야 합니다.

콘솔에 출력되는 최종 결과는 다음과 같습니다.

방금 저장한 내용이 int 유형이라는 것을 독자들이 눈치챘을지는 모르겠지만, 이는 문자열 유형으로 인쇄되었습니다. 이는 localStorage 자체의 특성과 관련이 있으며 문자열 유형의 저장만 지원합니다.

localStorage 읽기

 if(!window.localStorage){ 경고(브라우저는 localstorage를 지원합니다); }else{ var Storage=window.localStorage; //필드 쓰기 Storage[a]=1; // c 필드를 작성하십시오. Storage[c]); //첫 번째 방법은 var a=storage.a; console.log(a); //두 번째 방법은 var b=storage[b]; 세 번째 방법은 var c=storage.getItem(c); console.log(c);

localStorage를 읽는 방법에는 세 가지가 있습니다. 공식적으로 권장되는 방법은 getItem/setItem입니다. 이유는 모르겠습니다.

앞서 말했듯이 localStorage는 프런트엔드 데이터베이스와 동일하며, 데이터베이스는 주로 추가, 삭제, 쿼리의 4단계로 구성됩니다. 여기서 읽기 및 쓰기는 추가 및 쿼리의 두 단계에 해당합니다.

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

이 단계를 변경하는 것은 이해하기 쉽습니다. 여기서는 예를 들어 간단히 설명하겠습니다.

 if(!window.localStorage){ 경고(브라우저는 localstorage를 지원합니다); }else{ var Storage=window.localStorage; //필드 쓰기 Storage[a]=1; // c 필드를 작성하십시오. store.setItem(c,3); Storage[b]); // console.log(typeof Storage[c]); /*구분선*/ console.log(storage.a);

콘솔에서 a 키가 4로 변경된 것을 확인할 수 있습니다.

localStorage 삭제

1. localStorage의 모든 내용 지우기

 var 스토리지=window.localStorage; 스토리지.a=1; console.log(storage);

2. localStorage에서 키-값 쌍 삭제

 var 저장=window.localStorage; 저장.a=1; console.log(storage); console.log(storage.a);

콘솔에서 결과 보기

localStorage 키 획득

 var 저장=window.localStorage; 저장.a=1; 저장.setItem(c,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); 로그(키) }

key() 메소드를 사용하여 인덱스에 들어가고 나가서 해당 키를 가져옵니다.

4. localStorage에 대한 기타 고려사항

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

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

예:

 if(!window.localStorage){ 경고(브라우저는 localstorage를 지원합니다); }else{ var Storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', Hobby:'program' }; =JSON.stringify(data);storage.setItem(data,d);console.log(storage.data);

읽은 후 JSON 문자열을 JSON 객체로 변환하려면 JSON.parse() 메서드를 사용하세요.

 var Storage=window.localStorage; var data={ 이름:'xiecanyong', 취미:'program' }; /JSON 문자열을 JSON 객체 출력으로 변환 var json=storage.getItem(data); var jsonObj=JSON.parse(json); jsonObj);

인쇄된 것은 Object 객체입니다.

주목해야 할 또 다른 점은 다른 유형을 읽을 때 변환해야 한다는 것입니다.