H5 localStorage 사용량 요약
- php中世界最好的语言원래의
- 2018-03-26 14:32:002451검색
이번에는 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를 사용하여 분석합니다.
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 localStorage 사용량 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!