HTML5 웹페이지 저장-HTML 튜토리얼-php.cn

HTML5 웹페이지 저장

零到壹度

풀어 주다： 2018-03-26 14:29:15

원래의

1556명이 탐색했습니다.

이번에는 HTML5 웹페이지 저장에 대한 내용과 HTML5 웹페이지 저장 시 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

HTML5 웹 스토리지 웹 스토리지

1. 웹 스토리지 이해

웹 스토리지는 소량의 데이터를 클라이언트 디스크에 저장하는 기술입니다. 브라우저가 WebStorage API 사양을 지원하는 한 웹 디자이너는 JavaScript를 사용하여 이를 작동할 수 있습니다. 먼저 Web Storage를 이해해 보겠습니다.

웹 스토리지의 용량은 클라이언트 브라우저에 따라 결정되며 일반적으로 1MB~5MB입니다.

Web Storage는 순수하게 클라이언트를 실행하며 각 웹페이지 요청을 서버에 보내지 않습니다.

웹 저장소는 일련의 키-값 쌍으로 데이터를 저장합니다.

Web Storage는 클라이언트에 데이터를 저장하는 두 가지 방법을 제공합니다. 하나는 localStorage이고 다른 하나는 sessionStorage입니다. 둘의 차이점은 선언 기간과 유효 범위에 있습니다.

**표 1 웹 저장소 유형의 차이점**
웹 저장소 유형	라이프 사이클	유효 범위
localStorage	삭제 명령을 실행하면 사라집니다	동일한 웹사이트의 웹페이지는 여러 창과 페이지로 확장될 수 있습니다
sessionStorage	브라우저 창이나 탭은 닫히면 사라집니다	현재 브라우저 창이나 탭에만 유효합니다.

브라우저가 웹 스토리지를 지원하는지 감지하는 구문은 다음과 같습니다.

if(typeof(Storage)=="undefined"){
<span style="white-space:pre">	</span>alert("您的浏览器不支持Web Storage");
}
else{
<span style="white-space:pre">	</span>//localStorage和sessionStorage程序代码
}

로그인 후 복사

참고: IE 및 Firefox를 테스트할 때 실행하려면 서버 또는 로컬 호스트에 파일을 업로드해야 합니다. 테스트시 구글 크롬 브라우저 사용을 권장합니다.

2. 특정 학습

1. localStorage 접속

동일한 웹 사이트는 프로토콜, 호스트(도메인 및 IP), 전송 포트(포트)가 동일해야 함을 의미합니다. .

WebStorage는 문자열 데이터의 저장만 허용합니다. localStorage에 액세스하는 방법은 다음 세 가지가 있습니다. 이전 창에서는 Storage 개체의 setItem 및 getItem 메서드를 작성할 필요가 없습니다(key: " userdata", 값: "Hello World"

Storage: window.localStorage.setItem(
key

value); 읽기: var v = window.localStorage.getItem(key
Array index

Storage: window.localStorage[
key

값 ;읽기: var v = window.localStorage[key
Storage: window.localStorage. key =value

읽기 : var v = window.localStorage.
key

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
	}
}

function saveToLocalStorage(){
	<strong>localStorage.username = inputname.value;</strong>
}
function loadFromLocalStorage(){
	<strong>show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";</strong>
}
</script>
</head>

<body onload="onLoad()">
请输入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>

</body>
</html></span><span style="font-size: 18px;">
</span>

로그인 후 복사

two , delete localStorage

window.localStorage.removeItem("userdata");
delete window.localStorage.userdata;

delete.window.localStorage["userdata"]; Clear() 메소드를 사용할 수 있습니다.

localStorage.clear();

<!DOCTYPE html>
<html>
<head>
<title>网页存储localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
		btn_clear.addEventListener("click",clearLocalStorage);
	}
}

function saveToLocalStorage(){
	localStorage.username = inputname.value;
}
function loadFromLocalStorage(){
	show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";
}
function clearLocalStorage(){
	<strong>localStorage.clear();</strong>
	show_LocalStorage.innerHTML = localStorage.username;
}
</script>
</head>

<body onload="onLoad()">
请输入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
<button id="btn_clear">清除localStorage数据</button>

</body>
</html>

로그인 후 복사

3. sessionStorage에 액세스

저장소

window.sessionStorage.

setItem

(

HTML5 웹페이지 저장

key

value

);

key ] = [값] ;
window.sessionStorage.key= value;

读取

var v = window.sessionStorage.getItem(key);
var v = window.sessionStorage [key];
var v = window.sessionStorage.key;

清除

window.sessionStorage.removeItem(key);
delete window.sessionStorage.key;
delete window.sessionStorage [key];
//全部清除
sessionStorage.clear();

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储sessionStorage</title>
<script type="text/javascript">
function onLoad(){
	inputSpan.style.display = &#39;none&#39;;
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		/*判断姓名是否已经存入localStorage，已存入时才执行{ }内的命令*/
		if(localStorage.username){
			/*数据不存在时返回undefined*/
				if(!localStorage.counter){
					localStorage.counter = 1;	/*初始值设为1*/
				}
				else{
					localStorage.counter++;		/*递增*/
				}
				btn_login.style.display = &#39;none&#39;;	/*隐藏“登录”按钮*/
				show_LocalStorage.innerHTML = localStorage.username+"你好，这是你第"+localStorage.counter+"次来到网站";
		}
		btn_login.addEventListener("click",login);
		btn_send.addEventListener("click",sendok);
		btn_logout.addEventListener("click",clearLocalStorage);
	}
}

function sendok(){
	localStorage.username = inputname.value;
	location.reload();		/*重载网页*/
}
function login(){
	inputSpan.style.display = &#39;&#39;;
}
function clearLocalStorage(){
	localStorage.clear();		/*情况localStorage*/
	show_LocalStorage.innerHTML = "已成功注销！";
	btn_login.style.display = &#39;&#39;;	/*显示“登录”按钮*/
	inputSpan.style.display = &#39;&#39;;	/*显示姓名输入框和“提交”按钮*/
}
</script>
</head>

<body onload="onLoad()">
<button id="btn_login">登录</button>
<button id="btn_logout">注销</button><br />
<span id="inputSpan">请输入你的姓名：<input type="text" id="inputname" value="" /><button id="btn_send">提交</button></span><br />
<p id="show_LocalStorage"></p><br />
</body>
</html></span><span style="font-weight: bold; font-size: 24px;">
</span>

로그인 후 복사

注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"

上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就会出现”11111......“

JavaScript将字符串转换成为数字可以用Number()方法，localStorage.counter =Number(localStorage.counter )+1;

위 내용은 HTML5 웹페이지 저장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!