웹 스토리지는 HTML5에서 도입 한 매우 중요한 기능입니다. 클라이언트 측에 데이터를 로컬로 저장할 수 있습니다. HTML4 쿠키와 유사하지만 쿠키보다 훨씬 강력한 기능을 구현할 수 있습니다. 쿠키의 크기는 4KB로 제한됩니다. 웹 스토리지 공무원은 웹 사이트 당 5MB를 권장합니다.
웹 스토리지는 두 가지 유형으로 나뉩니다 .SessionStorage
현지 스토리지
SessionStorage가 세션에 데이터를 저장하고 브라우저가 닫혀 있음을 문자 그대로 의미에서 명확하게 볼 수 있습니다. LocalStorage는 클라이언트의 데이터를 로컬로 유지합니다.
SessionStorage 또는 LocalStorage이든, 사용할 수있는 API는 동일합니다. 일반적으로 사용되는 것은 다음과 같습니다 (예 : LocalStorage를 예로 들어 보는) :
데이터 저장 : localStorage.setItem (키, 값);
데이터 읽기 : localStorage.getItem (키);
개별 데이터 삭제 : localStorage.removeItem (key);
모든 데이터 삭제 : localStorage.clear ();
특정 색인의 키를 얻으십시오 : localStorage.key (색인);
위에서 언급했듯이 키와 값은 모두 문자열이어야합니다. 다시 말해, 웹 스토리지 API는 문자열을 조작 할 수 있습니다.
다음으로 웹 스토리지를 통해 간단한 주소록 애플릿을 개발하여 관련 API를 사용하는 방법을 보여줍니다. 다음 기능을 구현하려고합니다.
연락처를 입력하십시오. 연락 담당자는 이름과 휴대폰 번호의 두 분야를 가지고 있으며 휴대 전화 번호를 키로 사용하여 LocalStorage에 저장합니다.
휴대폰 번호에 따라 소유자를 찾으십시오.
현재 저장된 모든 연락처 정보를 나열하십시오.
먼저 다음과 같이 간단한 HTML 페이지를 준비하십시오 .<! doctype html>
<html>
<헤드>
<meta charset = "utf-8"/>
<title> HTML5 로컬 스토리지 웹 저장 기사 </title>
</head>
<body>
<div style = "테두리 : 2px 점선 #ccc; 너비 : 320px; 텍스트-정렬 : 중심;">
<label for = "user_name"> 이름 : </label>
<입력 유형 = "text"id = "user_name"name = "user_name"/>
<br/>
<label for = "mobilephone"> 휴대 전화 : </label>
<입력 유형 = "text"id = "mobilephone"name = "mobilephone"/>
<br/>
<input type = "button"onclick = "save ()"value = "레코드 추가"/>
<hr/>
<label for = "search_phone"> 휴대 전화 번호를 입력하십시오 : </label>
<입력 유형 = "text"id = "search_phone"name = "search_phone"/>
<input type = "button"onclick = "find ()"value = "소유자 찾기"/>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "List">
</div>
</body>
</html>
인터페이스는 다음과 같이 표시됩니다 .연락처를 저장하려면 다음 JS 메소드 만 구현하면됩니다.
// 데이터 저장
함수 save () {
var mobilephone = document.getElementById ( "mobilephone"). 값;
var user_name = document.getElementById ( "user_name"). 값;
LocalStorage.setitem (Mobilephone, user_name);
}
검색 소유자를 구현하려면 다음 JS 메소드가 구현됩니다 .// 데이터를 찾습니다
함수 찾기 () {
var search_phone = document.getElementById ( "search_phone"). 값;
var name = localstorage.getitem (search_phone);
var find_result = document.getElementById ( "find_result");
find_result.innerhtml = search_phone +의 소유자는 다음과 같습니다. " + name;
}
저장된 모든 연락처 정보를 표시하려면 LocalStorage.key (Index) 메소드를 사용해야합니다.
// LocalStorage에 저장된 모든 객체를 추출하여 인터페이스에 표시합니다.
함수 loadall () {
var list = document.getElementById ( "List");
if (localstorage.length> 0) {
var result = "<테이블 테두리 = '1'>";
결과 += "<tr> <td> 이름 </td> <td> 휴대폰 번호 </td> </tr>";
for (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var name = localstorage.getitem (mobilephone);
결과+= "<tr> <td>"+name+"</td> <td>"+mobilephone+"</td> </tr>";
}
결과 += "</table>";
list.innerhtml = 결과;
}또 다른{
list.innerhtml = "현재 데이터가 비어 있고 서두르고 연락처 추가를 시작합니다";
}
}
효과는 다음과 같습니다.
질문 : 위에서 언급했듯이 2 개의 필드, 이름 및 휴대폰 번호 만 있습니다. 회사 이름, 주소 주소 등과 같은 더 풍부한 연락처 정보를 입금하려면 어떻게이를 달성 하는가? 웹 스토리지가 문자열 만 처리 할 수 없습니까? 현재 JSON의 Stringify () 메소드를 사용하여 복잡한 객체를 문자열로 변환하여 웹 저장에 저장할 수 있습니다. Web Storage에서 읽을 때 JSON의 구문 분석 방법을 통해 JSON 객체로 변환 할 수 있습니다.
다음 간단한 데모는 회사 속성을 추가하여 JS 코드를 저장합니다 .// 데이터 저장
함수 save () {
var contact = 새 개체;
contact.user_name = document.getElementById ( "user_name"). 값;
contact.mobilephone = document.getElementById ( "mobilephone"). 값;
contact.company = document.getElementById ( "Company"). 값;
var str = json.stringify (contact);
localstorage.setitem (contact.mobilephone, str);
loadall ();
}
// LocalStorage에 저장된 모든 객체를 추출하여 인터페이스에 표시합니다.
함수 loadall () {
var list = document.getElementById ( "List");
if (localstorage.length> 0) {
var result = "<테이블 테두리 = '1'>";
결과 += "<tr> <td> name </td> <td> 모바일 </td> <td> 회사 </td> </tr>";
for (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var str = localStorage.getItem (Mobilephone);
var contact = json.parse (str);
결과+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.company+"</td> </tr>";
}
결과 += "</table>";
list.innerhtml = 결과;
}또 다른{
list.innerhtml = "현재 데이터가 비어 있고 서두르고 연락처 추가를 시작합니다";
}
}
효과는 다음과 같습니다.