Html5web 로컬 스토리지 인스턴스 세부정보
이 글은 주로 Html5 관련 정보웹 로컬 저장소 예시에 대한 자세한 설명을 소개합니다. 필요한 친구는
웹 저장소는 HTML5에서 소개됩니다. HTML4의 쿠키와 유사하지만 클라이언트에 로컬로 데이터를 저장할 수 있는 매우 중요한 기능이지만 쿠키 크기는 4KB로 제한되어 있습니다. 웹 스토리지에서는 공식적으로 각 웹사이트의 5MB를 권장합니다. .
웹 스토리지는 두 가지 유형으로 구분됩니다.
세션스토리지
localStorage
sessionStorage는 세션에 데이터를 저장하고 브라우저가 닫힐 때 사라지는 반면 localStorage는 항상 클라이언트에 로컬로 데이터를 저장한다는 것을 문자 그대로의 의미에서 명확하게 알 수 있습니다.
API는 sessionStorage와 localStorage 모두 동일합니다. 일반적으로 사용되는 API는 다음과 같습니다(localStorage를 예로 들어). 데이터 저장: localStorage.
setItem (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);
} //用于保存数据
//查找数据
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;
}
저장된 모든 연락처 정보를 표시하려면 다음과 같이 localStorage.key(index) 메소드를 사용해야 합니다.
//将所有存储在localStorage中的对象提取出来，并展现到界面上
functionloadAll(){
varlist=document.getElementById("list");
if(localStorage.length>0){
varresult="<tableborder='1'>";
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의 
string
다음은 회사의 속성 에 연락처 저장 JS 코드를 추가하는 간단한 데모입니다.
위는 편집자가 소개한 Html5 웹 로컬 저장 예시에 대한 자세한 설명이길 바랍니다. 문의사항이 있으시면 메시지 남겨주세요
위 내용은 Html5web 로컬 스토리지 인스턴스 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
H5 코드 : 웹 개발자를위한 모범 사례
Apr 16, 2025 am 12:14 AM
H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.
H5 : 웹 표준 및 기술의 발전
Apr 15, 2025 am 12:12 AM
웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.
H5 : 웹에서 사용자 경험을 향상시키는 방법
Apr 19, 2025 am 12:08 AM
H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.
H5 코드 이해 : HTML5의 기본 사항
Apr 17, 2025 am 12:08 AM
HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.
H5 코드 해체 : 태그, 요소 및 속성
Apr 18, 2025 am 12:06 AM
HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.
H5 코드의 빌딩 블록 : 주요 요소 및 그 목적
Apr 23, 2025 am 12:09 AM
HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.
H5와 HTML5 사이의 연결 : 유사성과 차이
Apr 24, 2025 am 12:01 AM
H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.
HTML5 및 H5 : 일반적인 사용법 이해
Apr 22, 2025 am 12:01 AM
HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.
