집 > 기사 > 웹 프론트엔드 > H5 웹 로컬 스토리지 사용 방법

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

php中世界最好的语言원래의: 2018-01-10 09:54:482417검색

이번에는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!