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

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

黄舟

풀어 주다： 2017-02-17 14:49:58

원래의

1393명이 탐색했습니다.

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

크기: 쿠키의 크기는 약 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 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!