Maison > Article > interface Web > Stockage de pages Web HTML5

Stockage de pages Web HTML5

零到壹度original: 2018-03-26 14:29:151509parcourir

Cette fois, je vais vous présenter le stockage des pages Web HTML5 et quelles sont les précautions à prendre pour le stockage des pages Web HTML5. Ce qui suit est un cas pratique, jetons un coup d'œil.

Stockage Web HTML5 Stockage Web

Comprendre le stockage Web

Web Storage est une technologie qui stocke de petites quantités de données sur le disque du client. Tant que le navigateur prend en charge la spécification de l'API WebStorage, les concepteurs Web peuvent utiliser JavaScript pour le faire fonctionner. Commençons par comprendre le stockage Web.

La capacité du stockage Web est déterminée par le navigateur client, généralement entre 1 Mo et 5 Mo.

Web Storage exécute uniquement le client et n'envoie pas chaque requête de page Web au serveur.

Web Storage stocke les données dans un ensemble de paires clé-valeur.

Web Storage propose deux façons de sauvegarder des données sur le client : l'une est localStorage et l'autre est sessionStorage. La différence entre les deux réside dans le cycle de déclaration et la plage valide.

sessionStorage

**表一 Web Storage类型的差异**
Web Storage类型	生命周期	有效范围
localStorage	执行删除命令时才会消失	同一网站的网页可以跨窗口和分页
sessionStorage	浏览器窗口或分页（tab）关闭就会消失	仅对当前浏览器窗口或分页有效

Tableau 1 Différences entre les types de stockage Web

Type de stockage Web

Cycle de vie

Plage valide

localStorage

Il ne disparaîtra que lorsque la commande de suppression est exécutée

Les pages Web d'un même site Web peuvent s'étendre sur plusieurs fenêtres et paginations

Il disparaîtra lorsque la fenêtre ou l'onglet (onglet) du navigateur est fermé

Uniquement pour la fenêtre actuelle du navigateur Ou la pagination est valide

Vérifiez si le navigateur prend en charge le stockage Web. La syntaxe est la suivante :

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

Remarque : IE. et test Firefox Vous devez télécharger le fichier sur le serveur ou l'hôte local pour l'exécuter. Il est recommandé d'utiliser le navigateur Google Chrome lors des tests.

2. Apprentissage spécifique

Le même site Web signifie que le protocole, l'hôte (domaine et IP) et le port de transmission (port) doivent être les mêmes.

WebStorage

autorise uniquement le stockage des données de chaîne Il existe les 3 façons suivantes pour accéder à localStorage. écrit

clé : "userdata", valeur : "Hello World" )

clé, valeur);
key);

clé] =valeur;
clé];

clé =valeur;
clé ;

<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>

2. Supprimer le stockage local

Si vous souhaitez supprimer un certain élément de données localStorage, vous pouvez appeler la méthode removeItem ou l'attribut delete pour le supprimer.

window.localStorage.removeItem("userdata");

supprimer window.localStorage.userdata;

delete.window.localStorage["userdata"];

Pour supprimer toutes les données localStorage, vous pouvez utiliser la méthode 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>

Stockage de pages Web HTML5

3. Accédez à la sessionStorage

Stockage

setItem(key ,valeur);
clé] = [valeur];
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;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML5 combiné avec Canvas pour obtenir une compression d'imageArticle suivant：HTML5 combiné avec Canvas pour obtenir une compression d'image

Articles Liés

Voir plus