HTML5 로컬 저장소 애플리케이션 sessionStorage 및 localStorage
- 大家讲道理원래의
- 2017-08-19 14:13:402763검색
HTML5 이전에는 브라우저가 일반적으로 쿠키를 사용하여 데이터를 저장했지만 쿠키에는 도메인 이름과 크기 제한이 있었습니다.
HTML5가 대중화된 이후에는 localStorage와 sessionStorage를 통해 브라우저 측의 데이터 저장이 가능해졌습니다. 기능은 어떻습니까?
sessionStorage
SessionStorage는 임시 세션입니다. 데이터 저장의 유효 기간은 페이지를 열 때부터 페이지를 닫을 때까지의 기간입니다. 닫으면 로컬 저장소가 사라집니다
localStorage
영구 저장소(데이터는 수동으로 삭제 가능)
저장소 한도(5M)
클라이언트에서 완료하고 서버 처리를 요청하지 않습니다
-
sessionStorage 데이터는 페이지 간에 공유할 수 없지만 localStorage는 페이지 간에 공유할 수 있습니다.
sessionStorage 애플리케이션:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
window.sessionStorage.setItem("name", aInput[3].value );
};
aInput[1].onclick = function(){
alert(window.sessionStorage.getItem("name" ));
};
aInput[2].onclick = function(){
window.sessionStorage.removeItem("name" );
};
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>localStorage 애플리케이션
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//localStorage : 永久性存储
window.localStorage.setItem("name", aInput[3].value);
window.localStorage.setItem("name2", 'aaaaa');
};
aInput[1].onclick = function(){
alert( window.localStorage.getItem( "name" ) );
alert( window.localStorage.getItem( "name2" ) );
};
aInput[2].onclick = function(){
window.localStorage.removeItem("name");
// window.localStorage.clear();
};
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var aInput = document.getElementsByTagName("input");
var oT = document.querySelector("textarea");
if (window.localStorage.getItem("userName")) {
aInput[0].value = window.localStorage.getItem("userName");
}
for (var i = 0; i < aInput.length; i++) {
if (window.localStorage.getItem('sex') == aInput[i].value) {
aInput[i].checked = true;
}
}
if (window.localStorage.getItem("note")) {
oT.value = window.localStorage.getItem("note");
}
window.onunload = function () {
if (aInput[0].value) {
window.localStorage.setItem("userName", aInput[0].value);
}
for (var i = 0; i < aInput.length; i++) {
if (aInput[i].checked == true) {
window.localStorage.setItem('sex', aInput[i].value);
}
}
if (oT.value) {
window.localStorage.setItem('note', oT.value);
}
}
}
</script>
</head>
<body>
<p>
用户名: <input type="text"/>
</p>
<p>
性别: <br/>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
备注:
<textarea cols="30" rows="10"></textarea>
</p>
</body>
</html>위 내용은 HTML5 로컬 저장소 애플리케이션 sessionStorage 및 localStorage의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.