Html5 학습 여정-Html5 웹 저장소 개요(16)-H5 튜토리얼-php.cn

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></body></html>

로그인 후 복사

appWeb 코드

/**
 * Created by joy liu on 2015/9/22.
 */function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

로그인 후 복사

도 다시 로드됩니다! ! ! ! 렌더링

Html5 학습 여정-Html5 웹 저장소 개요(16)

로컬 저장소 인스턴스

색인 코드가 변경되지 않았습니다. js 코드

/**
 * Created by joy liu on 2015/9/22.
 *///function saveStorage(id){//    var target = document.getElementById(id);//    var string = target.value;//    sessionStorage.setItem("message",string);//}//function loadStorage(id){//    var target = document.getElementById(id);//    var msg = sessionStorage.getItem("message");//    target.innerHTML = msg;//}function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

로그인 후 복사

렌더링

Html5 학습 여정-Html5 웹 저장소 개요(16)

캔버스 외에도 HTML5의 또 다른 매우 중요한 기능은 클라이언트의 웹 저장소를 로컬에 저장하는 것입니다. 이전에는 사용자 이름 및 기타 정보가 클라이언트의 쿠키에 저장될 수 있었습니다. 나중에 쿠키가 발견되었습니다. 저장소에는 다음과 같은 문제가 있습니다.

크기: 쿠키의 크기는 약 4kb로 제한됩니다.

대역폭: 쿠키는 Http 비즈니스와 함께 전송되므로 일부입니다. 대역폭이 낭비됩니다

복잡성: 쿠키를 올바르게 작동하기 어렵습니다

위의 문제에 대해 HTML5에서는 데이터를 로컬에 저장하는 방법인 웹 스토리지

를 제안합니다. 두 가지 처리 방법이 있습니다:

로컬 저장소: 사용자의 브라우저가 닫혀 있어도 클라이언트의 하드웨어(하드 드라이브)에 데이터를 저장합니다. 다음에 열면

세션 저장소 인스턴스

index.html 코드

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></body></html>

로그인 후 복사

appWeb 코드

/**
 * Created by joy liu on 2015/9/22.
 */function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

로그인 후 복사

도 다시 로드됩니다! ! ! ! 렌더링

Html5 학습 여정-Html5 웹 저장소 개요(16)

로컬 저장소 인스턴스

인덱스 코드가 변경되지 않았습니다. js 코드

/**
 * Created by joy liu on 2015/9/22.
 *///function saveStorage(id){//    var target = document.getElementById(id);//    var string = target.value;//    sessionStorage.setItem("message",string);//}//function loadStorage(id){//    var target = document.getElementById(id);//    var msg = sessionStorage.getItem("message");//    target.innerHTML = msg;//}function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

로그인 후 복사

렌더링

Html5 학습 여정-Html5 웹 저장소 개요(16)

위 내용은 Html5 학습 여정 - Html5 웹 스토리지 개요(16) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.