HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML 5 Base de datos local HTML5 Elementos semánticos

HTML5 Almacenamiento en el cliente

HTML5 Almacenamiento en el cliente, una mejor forma de almacenamiento local que las cookies. Uso de HTML5Se puede almacenar los datos de navegación del usuario localmente.

¿Qué es HTML?5 ¿Qué es el almacenamiento en el cliente de Web?

Uso de HTML5Se puede almacenar los datos de navegación del usuario localmente.

Antes, el almacenamiento local utilizaba cookies. Pero el almacenamiento web necesita ser más seguro y rápido. Estos datos no se almacenarán en el servidor, sino que solo se utilizarán para la solicitud de datos del sitio web del usuario. También puede almacenar una gran cantidad de datos sin afectar el rendimiento del sitio web.

Los datos se almacenan con clave/Existen pares de valores, los datos de la página web solo permiten que la propia página web los acceda y utilice.

Compatibilidad del navegador

Internet Explorer 8+, Firefox, Opera, Chrome y Safari admiten el almacenamiento web.

Atención: Internet Explorer 7 y versiones de IE anteriores no admiten almacenamiento web.

localStorage y sessionStorage　

Los dos objetos de almacenamiento de datos del cliente son:

localStorage - Se utiliza para almacenar datos a largo plazo de todo el sitio web, los datos almacenados no tienen fecha de expiración hasta que se eliminen manualmente.
sessionStorage - Se utiliza para almacenar temporalmente los datos del mismo ventana (o pestaña), que se eliminarán después de cerrar la ventana o la pestaña.

Antes de usar el almacenamiento web, debe verificar si el navegador admite localStorage y sessionStorage:

Ejemplo

if(typeof(Storage)!=="undefined")
{
　　　　//　¡Sí! Se admite localStorage y sessionStorage.
　　　　//　Algunos códigos.....
} else {
　　　　//　¡Lamentamos! No se admite el almacenamiento web.
}

Objeto localStorage

Los datos almacenados en el objeto localStorage no tienen límite de tiempo. Los datos seguirán siendo accesibles al día siguiente, la próxima semana o el próximo año.

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "基础教程网";
　　document.getElementById("result").innerHTML = "Nombre del sitio:"　+　localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="Lo siento, tu navegador no admite el almacenamiento web.";
}
</script>
</body>
</html>

Prueba aquí ‹/›

Análisis de ejemplo:

Crear una clave localStorage con key="sitename" y value="基础教程网"./Par de valores.
Buscar el valor con clave "sitename" e insertar los datos en el elemento con id="result".

El ejemplo anterior también se puede escribir así:

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body
<script>
//　Almacenamiento
localStorage.sitename = "基础教程网";
//　Búsqueda
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

Prueba aquí ‹/›

Eliminar "sitename" del localStorage:

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
</head>
<body
localStorage.removeItem("sitename");
</body>
</html>

Prueba aquí ‹/›

Ya sea localStorage o sessionStorage, las API disponibles son las mismas, las más comunes son las siguientes (tomando localStorage como ejemplo):

Guardar datos: localStorage.setItem(key,value);
Leer datos: localStorage.getItem(key);
Eliminar un solo dato: localStorage.removeItem(key);
Eliminar todos los datos: localStorage.clear();
Obtener la clave de un índice: localStorage.key(index);

Consejo: Clave/Los valores se almacenan generalmente como cadenas, puedes convertir este formato según tus necesidades.

El siguiente ejemplo muestra el número de veces que el usuario ha hecho clic en el botón.

Conversión de valores de cadena en tipo numérico del código:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　　　　　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="Ya has hecho clic en el botón"　+　localStorage.clickcount　+　" 次数 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="Lo siento, tu navegador no admite el almacenamiento web.";
　　　　}
}
</script>
</head>
<body
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>Cierra la pestaña del navegador (o la ventana), abre esta página nuevamente y el contador continuará contando (no se restablecerá).</p>
</body>
</html>

Prueba aquí ‹/›

Objeto sessionStorage

El método sessionStorage almacena datos para una sesión. Cuando el usuario cierra la ventana del navegador, los datos se eliminan.

¿Cómo crear y acceder a un sessionStorage?:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial Network(oldtoolbag.com)</title>　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="En esta sesión ya has hecho clic en este botón"　+　sessionStorage.clickcount　+　" 次数 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
　　　　}
}
</script>
</head>
<body
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>

Prueba aquí ‹/›

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；

以下代码用于保存于查找数据：

Métodos save() y find()

Ejemplo

//Guardar datos　　
function save(){　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("添加成功");
}
//Buscar datos　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site　+　"的网址是："　+　sitename;　　
}

完整示例演示如下：

Ejemplo

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5Anotación de almacenamiento local de Web Storage</title>　　
</head>　　
<body　　
　　　　<div style="border:　2px biselado #ccc;width:320px;text-alineacion:centro;">　　　　　
　　　　　　　　<label for="sitename">网站名(key)：</etiqueta>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">网　址(value)：</etiqueta>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="Agregar registro"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">输入网站名：</etiqueta>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="Buscar sitio web"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//　载入所有存储在localStorage的数据
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//Guardar datos　　
　　　　function save(){　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("添加成功");
　　　　}
　　　　//Buscar datos　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site　+　"的网址是："　+　siteurl;　　
　　　　}
　　　　//Extrae todos los objetos almacenados en localStorage y muestra en la interfaz
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>key</td><td>value</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result　+="<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+="</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "Los datos están vacíos...";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

Prueba aquí ‹/›

Captura de pantalla del efecto de implementación:

El ejemplo anterior solo muestra un almacenamiento simple de localStorage y búsqueda, en más casos, los datos que almacenamos serán más complejos.

A continuación, utilizaremos JSON.stringify para almacenar los datos del objeto, JSON.stringify puede convertir un objeto en una cadena.

Ejemplo

var site = new Object;
...
var str = JSON.stringify(site);　//　Convierte el objeto en una cadena

Luego utilizamos el método JSON.parse para convertir la cadena en un objeto JSON:

Ejemplo

var site = JSON.parse(str);

Código de implementación en JavaScript:

Métodos save() y find()

Ejemplo

//Guardar datos　　
function save(){　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site);　//　Convierte el objeto en una cadena
　　　　localStorage.setItem(site.keyname, str);　　
　　　　alert("Guardado con éxito");
}　　
//Buscar datos　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site　+　“El nombre del sitio web es:”　+　site.sitename　+　“， la dirección web es:”　+　site.siteurl;　　
}

Ejemplo completo a continuación:

Ejemplo

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5Anotación de almacenamiento local de Web Storage</title>　　
</head>　　
<body　　
　　　　<div style="border:　2px biselado #ccc;width:320px;text-alineacion:centro;">
　　　　　　　　<label for="keyname">Alias (clave): </etiqueta>　　
　　　　　　　　<input type="text" id="keyname" name="keyname" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="sitename">Nombre del sitio: </etiqueta>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">Dirección web: </etiqueta>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="Agregar registro"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">Ingrese el alias (clave): </etiqueta>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="Buscar sitio web"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//Guardar datos　　
　　　　function save(){　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site);　//　Convierte el objeto en una cadena
　　　　　　　　localStorage.setItem(site.keyname, str);　　
　　　　　　　　alert("Guardado con éxito");
　　　　}　　
　　　　//Buscar datos　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site　+　“El nombre del sitio web es:”　+　site.sitename　+　“， la dirección web es:”　+　site.siteurl;　　
　　　　}　　
　　　　
　　　　//Extrae todos los objetos almacenados en localStorage y muestra en la interfaz
　　　　//　Asegúrate de que el valor correspondiente a keyname almacenado sea un objeto de conversión, de lo contrario JSON.parse generará un error
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result　+="<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+="</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "Los datos están vacíos...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

Prueba aquí ‹/›

El loadAll del ejemplo exporta todos los datos almacenados, debes asegurarte de que los datos almacenados en localStorage estén en formato JSON, de lo contrario JSON.parse(str) generará un error.

Demostración de resultados de salida:

HTML 5 Base de datos local HTML5 Elementos semánticos