HTML5 로컬 저장소 웹 저장소-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 로컬 저장소 웹 저장소

不言

Jun 14, 2018 am 10:07 AM

html5storageweb로컬 저장소

이 글에서는 주로 HTML5 로컬 저장소의 웹 저장소 관련 정보를 자세히 소개합니다. 웹 저장소가 JSON을 사용하여 여러 데이터를 저장하는 방법에 대해 관심 있는 친구들이 참고할 수 있습니다.

HTML5가 등장하기 전에 개발자가 소량의 데이터를 저장해야 하는 경우 클라이언트의 데이터는 쿠키를 통해서만 얻을 수 있지만 쿠키에는 몇 가지 단점이 있습니다.

•각 도메인 이름 아래의 쿠키 크기는 4KB로 제한됩니다.
•쿠키는 모든 http 요청에 포함되므로 중복된 데이터가 전송될 수 있습니다.
•쿠키는 네트워크 전송 중에 암호화되지 않으므로 보안 위험이 있습니다.

HTML5에는 새로운 웹 저장 기능이 추가되었습니다. 웹 저장 공간은 공식적으로 각 웹사이트당 5MB를 권장합니다. 쿠키보다 더 많은 데이터를 저장할 수 있고, 쿠키보다 더 강력한 기능을 가지고 있습니다. 이제 Firefox, Opera, Chrome, Safari 등 주요 브라우저에서 웹 스토리지를 지원합니다.

웹 저장소 소개

웹 저장소는 세션 저장소와 로컬 저장소로 구분됩니다.

세션 저장소: 세션과 유사하게 세션 저장소에 저장되는 데이터 수명은 세션 기간과 동일합니다. 사용자의 세션이 종료되면 세션 저장소에 저장된 데이터는 사라집니다.

로컬 저장소: 로컬 저장소에 저장된 데이터는 항상 로컬이며, 사용자나 프로그램이 명시적으로 알지 않는 한 데이터는 일관되게 존재하게 됩니다.

window 개체는 각각 세션 저장소와 로컬 저장소를 나타내는 두 가지 속성, sessionStorage와 localStorage를 제공합니다. 이 두 가지의 기능과 사용법은 저장하는 데이터의 수명이 다르다는 점을 제외하면 거의 동일합니다. Storage는 다음과 같은 속성과 메서드를 제공합니다(예: localStorage):

•localStorage.length: 키-값 쌍의 수를 가져옵니다.
•localStorage.key(index): 인덱스 인덱스의 키를 가져옵니다. localStorage.getItem(key): 지정된 키에 해당하는 값을 가져옵니다.
•localStorage.setItem(key, value): 지정된 키-값 쌍을 저장합니다.
•localStorage.removeItem(key): 키-값 쌍을 삭제합니다. 지정된 키에 해당합니다.
•localStorage.clear(): 모든 키-값 쌍을 삭제합니다.
키와 값 모두 문자열이어야 한다는 점에 유의하세요. 즉, 웹 스토리지 API는 문자열에서만 작동할 수 있습니다. 그런 다음 문자열이 아닌 일부 데이터의 경우 JSON 및 기타 방법을 통해 문자열 형식으로 변환한 후 작업할 수 있습니다.

웹 스토리지는 JSON을 사용하여 여러 데이터를 저장합니다.

작은 프로그램을 사용하여 관련 속성 및 메서드의 기본 사용법을 익힙니다.

•학생의 기본 정보(학생 번호, 이름, 학년, 성별 포함)를 입력합니다. ), 학생 번호를 키 값으로 사용하여 로컬 저장소에 저장합니다.

• 학생 번호를 통해 학생의 기본 정보를 쿼리합니다.
• 모든 학생의 정보를 표시합니다.
먼저 HTML 페이지를 디자인합니다.

JS를 통해 학생 구현 정보는 로컬 저장소에 저장됩니다. 분석을 통해 저장해야 하는 학생 정보에 여러 필드가 포함되어 있음을 확인했습니다. 이때 JSON의 stringify() 메서드를 사용하여 변환할 수 있습니다. 복잡한 객체를 문자열로 변환하여 웹 저장소에 저장합니다. 웹 저장소에서 읽을 때 JSON 구문 분석() 메서드를 통해 JSON 객체로 변환할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML本地存储之web storage</title>
    <style type="text/css">
        #content{   
            border: 1px solid #3D19DD;   
            width:600px;   
            text-align:center;   
            padding: 10px 0;   
            margin: 0 auto;   
        }   
        #content input{   
            margin-top: 10px;   
        }   
    </style>
</head>
<body>
    <p id="content">
         <label for="user_num">学号：</label>
        <input type="text" id="user_num" name="user_num" />
        <br/>
        <label for="user_name">姓名：</label>
        <input type="text" id="user_name" name="user_name" />
        <br/>
        <label for="grade">年级：</label>
        <input type="text" id="grade" name="grade"/>
        <br/>
        <label for="sex">性别：</label>
        <input type="text" id="sex" name="sex"/>
        <br/>
        <input type="button" onclick="save()" value="添加名单"/>
        <hr/>
        <label for="search_num">输入学号：</label>
        <input type="text" id="search_num" name="search_num"/>
        <input type="button" onclick="find()" value="查找学生信息"/>
        <p id="find_result"><br/></p>
        <hr/>
         <input type="button" onclick="show()" value="显示所有">
         <p id="list">
         </p>
    </p>
    <br />
</body>
</html>

우리는 세 가지 학생 정보를 localStorage에 저장하고 localStorage에 정보 저장:

JS 사용 학생번호로 학생정보를 검색할 때, 꺼내오는 값이 JSON 문자열이므로, 이를 JSON 객체로 변환해야 한다는 점에 주의해야 합니다. JSON 구문 분석() 메소드는 다음과 같습니다.

function save(){     
        var user_num = document.getElementById("user_num").value;   
        var user_nameElement = document.getElementById("user_name").value;   
        var gradeElement = document.getElementById("grade").value;     
        var sexElement = document.getElementById("sex").value;   
        var msg = {   
            user_name: user_nameElement,   
            grade: gradeElement,   
            sex: sexElement,   
        };    
        localStorage.setItem(user_num,JSON.stringify(msg));     
    }

마찬가지로 모든 학생 정보를 표시할 때에도 추출된 값 문자열을 JSON 객체로 변환해야 합니다.

function find(){     
        var user_num = document.getElementById("search_num").value;    
        var str = localStorage.getItem(user_num);    
        var msg = JSON.parse(str);    
        var find_result = document.getElementById("find_result");     
        find_result.innerHTML = "学号为："+user_num+"的基本信息： 姓名："+msg.user_name + "，年级：" + msg.grade+",性别："+msg.sex;     
    }

최종 렌더링은 다음과 같습니다.

사진을 저장하는 웹 저장소

앞서 언급했듯이 로컬 저장소는 문자열 액세스만 지원하므로 우리가 해야 할 일은 이미지를 데이터 URI로 변환하는 것뿐입니다. 이를 달성하는 한 가지 방법은 캔버스 요소를 사용하여 이미지를 로드하는 것입니다. 그런 다음 캔버스에서 이미지를 데이터 URI로 읽을 수 있습니다. 이미지를 저장하는 함수는 다음과 같습니다:

function show(){     
        var list = document.getElementById("list");     
        if(localStorage.length>0){     
            var result = "<table border=&#39;1&#39; style=&#39;width:300px; margin:0 auto;&#39;>";     
            result += "<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>";     
            for(var i=0;i<localStorage.length;i++){     
                var user_num = localStorage.key(i);     
                var str = localStorage.getItem(user_num);     
                var msg = JSON.parse(str);     
                result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";     
            }     
            result += "</table>";     
            list.innerHTML = result;     
          }else{     
                list.innerHTML = "当前还没有数据";     
          }     
    }

이 함수는 두 개의 매개변수를 받습니다. 하나는 키 값이고 다른 하나는 setImg("img1", "1.jpg") 로컬 저장소의 저장 상태 확인:

얻어 표시되는 코드 함수는 다음과 같습니다.

function setImg(key,src){   
        var img = document.createElement(&#39;img&#39;);   
        //当图片加载完成的时候触发回调函数 
        img.addEventListener("load",function(){   
            var imgCanvas = document.createElement("canvas"),   
            imgContext = imgCanvas.getContext("2d");   
        //确保canvas元素大小和图片的尺寸一致 
        imgCanvas.width = this.width;   
        imgCanvas.height = this.height;   
        //渲染图片到canvas中 
        imgContext.drawImage(this,0,0,this.width,this.height);   
        //用data url的形式取出 
        img.crossOrigin = "*"; //防止跨域取照片出错 
        var imgAsDataURL = imgCanvas.toDataURL("image/png");   
        //保存到本地存储中 
        try{   
            localStorage.setItem(key, imgAsDataURL);   
        }   
        catch(e){   
            alert("保存失败！请重试。。。");   
        }   
        }, false);   
        img.src = src;   
    }

이 함수는 하나의 매개변수만 받습니다. 이미지의 키 값을 찾아야 합니다. :

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 기사

H5 : 최신 버전의 HTML 탐색May 03, 2025 am 12:14 AM

html5isamajorrevisionof thehtml thatrevolutions webdevelopments and capabilitiess.1) itenhancescodereadabilitys 및 and .2) html5enablestriCher, Interactive Experiences, Withoutplugs를 허용합니다

기본 이외 : H5 코드의 고급 기술May 02, 2025 am 12:03 AM

H5에 대한 고급 팁에는 다음이 포함됩니다. 1. 복잡한 그래픽 사용, 2. 웹 워크를 사용하여 성능 향상, 3. WebStorage, 4. 응답 디자인 구현, 5. WebRTC를 사용하여 실시간 커뮤니케이션을 달성하기 위해, 6. 성능 최적화 및 모범 사례를 수행하십시오. 이 팁은 개발자가보다 역동적이고 대화식 및 효율적인 웹 응용 프로그램을 구축 할 수 있도록 도와줍니다.

H5 : 웹 컨텐츠 및 디자인의 미래May 01, 2025 am 12:12 AM

H5 (HTML5)는 새로운 요소와 API를 통해 웹 컨텐츠와 디자인을 개선합니다. 1) H5는 시맨틱 태깅 및 멀티미디어 지원을 향상시킵니다. 2) 웹 디자인을 풍부하게하는 캔버스 및 SVG를 소개합니다. 3) H5는 새로운 태그와 API를 통해 HTML 기능을 확장하여 작동합니다. 4) 기본 사용에는이를 사용하여 그래픽 생성이 포함되며, 고급 사용량은 WebStorageapi와 관련이 있습니다. 5) 개발자는 브라우저 호환성 및 성능 최적화에주의를 기울여야합니다.

H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.