Html5 학습 여정-Html5 웹 저장소 개요(16)
- 黄舟원래의
- 2017-02-17 14:49:581279검색
캔버스 외에도 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('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></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;
}
도 다시 로드됩니다! ! ! ! 렌더링
/**
* 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;
}
렌더링
<!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('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></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;
}
도 다시 로드됩니다! ! ! ! 렌더링
/**
* 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;
}
렌더링
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：H5 학습 여정-H5 엔터티 (14)다음 기사：H5 학습 여정-H5 엔터티 (14)