HTML5 로컬 저장 기능 사용에 대한 팁 살펴보기

이 글에서는 주로 HTML5 로컬 저장 기능의 응용 기술을 소개합니다. 예제를 통해 HTML5 로컬 저장에 대한 이해를 심화시키고 능숙하게 적용할 수 있으므로 관심 있는 친구들이 참고할 수 있습니다.

이 애플리케이션에서는 사용자가 사용자 이름과 휴대폰 번호를 입력하고 해당 루틴을 로컬에 저장하고 검색, 표시 등의 기본 작업을 수행할 수 있는 간단한 애플리케이션을 구현해 보겠습니다.

아래에는 키코드만 나와있습니다. 프로젝트 구조, 기본코드, CSS 스타일은 직접 추가하시면 됩니다.

기능별로 배포를 완료합니다.

1. 저장 기능

여기서 사용자가 이름과 휴대폰 번호를 입력하면 해당 정보가 웹 저장소에 저장됩니다. html은 다음과 같습니다.

<form>     
     <labelforlabelforlabelforlabelfor=”username”>姓名：</label>     
     <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
     <labelforlabelforlabelforlabelfor=”mobilephone”>手机号：</label>     
     <input type=”text” id=”mobilephone”name=”mobilephone” />        
     <input type=”button” onclick=”save()”vale=”新增记录” />     
</form>

위 코드는 사용자가 이름과 휴대폰 번호를 입력한 후 Add Record를 클릭하여 이름-휴대폰 번호 키-값 쌍을 로컬에 저장하는 형식입니다. js의 구체적인 저장 함수 코드는 다음과 같습니다.

function save(){     
     var mobilePhone= document.getElementById(“mobilephone”).value;     
     var userName= dpcument.getElementById(“username”).value;     
     localStorage.setItem(mobilePhone,userName);     
}

저장 함수의 논리는 매우 간단합니다. 사용자가 입력한 값을 빼낸 후 localStorage의 setItem 함수를 사용하는 것입니다. 웹 스토리지 중간에 키-값 쌍의 형태로 정보를 저장합니다.

2. 검색 기능

사용자가 전화번호를 입력하면 해당 검색 정보가 데이터베이스에 표시됩니다. HTML 코드는 다음과 같습니다.

<label for=”search”>请输入手机号：</label>     
<input type=”text" id=”search”name=”search” />     
<input type=”button” onclick=”find()”value=”查找”>     
<p id=”result”><p>

결과 영역은 쿼리 결과를 배치하는 데 사용됩니다. 다음은 js의 찾기 기능에 대한 관련 코드입니다.

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

먼저 사용자가 입력한 휴대폰 번호를 얻은 다음 getItem을 사용하여 확대하여 다음에서 이 휴대폰 번호로 사용자 이름을 가져옵니다. 데이터베이스에 저장하고 마지막으로 결과 영역 중앙에 함께 표시합니다.

위 두 가지는 가장 기본적인 기능으로, 로컬 스토리지의 고급 활용법과 모바일 애플리케이션에서 로컬 스토리지 기능을 자유롭게 활용하는 방법에 대해 계속해서 탐구하겠습니다. 더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼을 방문하세요!