이번에는 H5의 웹 로컬 스토리지 사용법을 알려드리겠습니다. H5의 웹 로컬 스토리지 사용 시 주의사항은 무엇인가요?
웹 저장소는 HTML5에서 도입된 매우 중요한 기능입니다. HTML4 쿠키와 유사하게 클라이언트에 로컬로 데이터를 저장할 수 있지만 쿠키 크기는 4KB로 제한됩니다. 웹사이트당 5MB.
Web Storage는 두 가지 유형으로 나뉩니다.
sessionStorage
localStorage
sessionStorage는 세션의 데이터를 저장하고 브라우저를 닫으면 사라진다는 의미로 명확하게 알 수 있습니다. 데이터는 항상 클라이언트에 로컬로 저장됩니다.
sessionStorage이든 localStorage이든 사용할 수 있는 API는 동일하며 일반적으로 사용되는 API는 다음과 같습니다(예: localStorage):
데이터 저장 : localStorage.setItem(key, value); 데이터 읽기: localStorage.getItem(key); 단일 데이터 삭제: localStorage.removeItem(key); 모든 데이터 삭제: localStorage.clear(); key(index);
위와 같이 키와 값이 모두 문자열이어야 합니다. 즉, 웹 스토리지 API는 문자열에서만 작동할 수 있습니다.
다음으로 관련 API의 사용을 보여주기 위해 웹 저장소를 통해 간단한 주소록 애플릿을 개발합니다.
연락처 입력에는 이름과 휴대폰 번호라는 두 가지 필드가 있습니다. localStorage에 키로 저장되어 있으며, 현재 저장된 모든 연락처 정보를 나열합니다.
먼저 간단한 HTML 코드를 작성하세요
<!DOCTYPEHTML> <html> <head> <metacharsetmetacharset="utf-8"/> <title>H5本地存储之WebStorage篇</title> </head> <body> <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;"> <labelforlabelfor="user_name">姓名:</label> <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/> <br/> <labelforlabelfor="mobilephone">手机:</label> <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/> <br/> <inputtypeinputtype="button"onclick="save()"value="新增记录"/> <hr/> <labelforlabelfor="search_phone">输入手机号:</label> <inputtypeinputtype="text"id="search_phone"name="search_phone"/> <inputtypeinputtype="button"onclick="find()"value="查找机主"/> <pidpid="find_result"><br/></p> </div> <br/> <dividdivid="list"> </div> </body> </html>
연락처를 저장하려면 다음 JS 메소드를 구현하세요.
functionsave(){ varmobilephone=document.getElementById("mobilephone").value; varuser_name=document.getElementById("user_name").value; localStorage.setItem(mobilephone,user_name); } //用于保存数据
//查找数据 functionfind(){ varsearch_phone=document.getElementById("search_phone").value; varname=localStorage.getItem(search_phone); varfind_result=document.getElementById("find_result"); find_result.innerHTML=search_phone+"的机主是:"+name; }
postMessage를 사용하여 H5에서 두 웹 페이지 간에 데이터를 전송하는 방법
위 내용은 H5 웹 로컬 스토리지 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!