집 > 기사 > 웹 프론트엔드 > Html5web 로컬 스토리지 인스턴스 세부정보

Html5web 로컬 스토리지 인스턴스 세부정보

高洛峰원래의: 2017-03-12 16:47:201317검색

이 글은 주로 Html5 관련 정보웹 로컬 저장소 예시에 대한 자세한 설명을 소개합니다. 필요한 친구는

웹 저장소는 HTML5에서 소개됩니다. HTML4의 쿠키와 유사하지만 클라이언트에 로컬로 데이터를 저장할 수 있는 매우 중요한 기능이지만 쿠키 크기는 4KB로 제한되어 있습니다. 웹 스토리지에서는 공식적으로 각 웹사이트의 5MB를 권장합니다. .

웹 스토리지는 두 가지 유형으로 구분됩니다.

세션스토리지

localStorage

sessionStorage는 세션에 데이터를 저장하고 브라우저가 닫힐 때 사라지는 반면 localStorage는 항상 클라이언트에 로컬로 데이터를 저장한다는 것을 문자 그대로의 의미에서 명확하게 알 수 있습니다.

API

는 sessionStorage와 localStorage 모두 동일합니다. 일반적으로 사용되는 API는 다음과 같습니다(localStorage를 예로 들어). 데이터 저장: localStorage.

set

Item (key,value); 데이터 읽기: localStorage.getItem(key); 삭제 단일 데이터: localStorage.removeItem(key); 🎜>(); 특정 인덱스 의 키 가져오기: localStorage.key(index); 위와 같이 키와 값은 모두 문자열 이어야 합니다. 즉, 웹 저장소 API는 문자열에서만 작동할 수 있습니다.

다음으로 관련 API의 사용을 보여주기 위해 웹 저장소를 통해 간단한 주소록 애플릿을 개발합니다. 연락처를 입력하면 연락처에 이름, 모바일이 포함됩니다. 전화번호 2 필드, 휴대전화 번호를 키로 사용하여 휴대전화 번호에 따라 소유자를 찾습니다.

먼저 간단한 HTML 코드를 작성합니다.

<!DOCTYPEHTML>
<html>
<head>
<metacharsetmetacharset="utf-8"/>
<title>HTML5本地存储之WebStorage篇</title>
</head>
<body>
<pstylepstyle="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>
</p>
<br/>
<pidpid="list">
</p>
</body>
</html>

페이지 작성 후 표시 효과는 거의 아래와 같습니다.

연락처를 저장하려면 구현하기만 하면 됩니다. 간단히 다음 JS 메서드로 충분합니다.

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存数据

Html5web 로컬 스토리지 인스턴스 세부정보

소유자를 찾으려면 다음 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;   
}

Html5web 로컬 스토리지 인스턴스 세부정보 저장된 모든 연락처 정보를 표시하려면 다음과 같이 localStorage.key(index) 메소드를 사용해야 합니다.

//将所有存储在localStorage中的对象提取出来，并展现到界面上   
functionloadAll(){   
varlist=document.getElementById("list");   
if(localStorage.length>0){   
varresult="<tableborder=&#39;1&#39;>";   
result+="<tr><td>姓名</td><td>手机号码</td></tr>";   
for(vari=0;i<localStorage.length;i++){   
varmobilephone=localStorage.key(i);   
varname=localStorage.getItem(mobilephone);   
result+="<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";   
}   
result+="</table>";   
list.innerHTML=result;   
}else{   
list.innerHTML="目前数据为空，赶紧开始加入联系人吧";   
}   
}

효과는 다음과 같습니다.

질문: 위 데모에는 이름, 휴대폰 번호라는 2개의 필드만 있습니다. 회사 이름과 같은 더 풍부한 연락처 정보를 저장하려면 가족 주소 등, 어떻게 구현하나요? 웹 스토리지는 문자열만 처리하지 않나요? 이때, Web Storage에서 읽어올 때

JSON

의 Html5web 로컬 스토리지 인스턴스 세부정보 string

ify() 메소드를 이용하여 복합객체를 문자열로 변환하여 Web Storage에 저장할 수 있으며, use JSON의 구문 분석() 메소드는 JSON 객체로 변환됩니다.

다음은 회사의 속성 에 연락처 저장 JS 코드를 추가하는 간단한 데모입니다.

효과는 다음과 같습니다.

위는 편집자가 소개한 Html5 웹 로컬 저장 예시에 대한 자세한 설명이길 바랍니다. 문의사항이 있으시면 메시지 남겨주세요

Html5web 로컬 스토리지 인스턴스 세부정보

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

성명：

이전 기사：Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.다음 기사：Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.