H5 웹 로컬 스토리지 사용 방법

php中世界最好的语言
풀어 주다: 2018-01-10 09:54:48
원래의
2439명이 탐색했습니다.

이번에는 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);   
} //用于保存数据
로그인 후 복사

머신 소유자를 찾으려면 다음 JS 메서드를 구현하세요.

//查找数据   
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;   
}
로그인 후 복사
이 사례를 읽으신 후 메서드를 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 읽기:

12가지 인기 없는 H5 디자인 팁

postMessage를 사용하여 H5에서 두 웹 페이지 간에 데이터를 전송하는 방법

H5에서 다섯개 별을 그리는 방법

위 내용은 H5 웹 로컬 스토리지 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿