El almacenamiento de datos en el cliente puede resolver muchos problemas y reducir la transmisión de datos innecesarios:
1. Puede guardar el estado del programa: el usuario puede saber dónde trabaja después de cerrar el navegador y abrirlo.
2. Puede almacenar datos: no hay necesidad de obtener muchos datos que no cambiarán desde el servidor cada vez.
3. Puede guardar las preferencias del usuario: este tipo de datos generalmente no necesita estar presente en el servidor.
Prácticas anterioresAntes del almacenamiento local HTML5, si queremos guardar datos persistentes en el cliente, hay varias opciones:
1. Cookies HTTP. La desventaja de las cookies HTTP es obvia. Solo pueden almacenar hasta 4KB de datos, y cada solicitud HTTP se enviará de regreso al servidor y se transmitirá texto sin formato (a menos que use SSL).
2. es decir, userdata. UserData es una solución de almacenamiento local lanzada por Microsoft durante la guerra del navegador en la década de 1990. Utiliza el atributo de comportamiento de DHTML para almacenar datos locales, lo que permite que cada página almacene hasta 64k datos y hasta 640k datos por sitio. Las desventajas de UserData son obvias. No es parte del estándar web. A menos que su programa solo necesite admitir IE, es básicamente inútil.
3. Flash Cookies. Las cookies flash en realidad no son las mismas que las cookies HTTP. Quizás su nombre debería ser el almacenamiento local flash. Las cookies flash permiten que cada sitio almacene datos no más de 100k de forma predeterminada. Si lo supera, Flash solicitará automáticamente un espacio de almacenamiento más grande del usuario. Con la interfaz ExternalInterface de Flash, puede operar fácilmente el almacenamiento local de Flash a través de JavaScript. El problema con Flash es muy simple, porque es flash.
4. Google Gears. Gears es un complemento de navegador de código abierto lanzado por Google en 2007, con el objetivo de mejorar la compatibilidad de los principales navegadores. Gears tiene una base de datos SQL integrada incorporada basada en SQLite y proporciona una API unificada para acceder a la base de datos. Después de obtener la autorización del usuario, cada sitio puede almacenar datos ilimitados en la base de datos SQL. El problema de Gears es que Google ya no lo usa.
La deslumbrante variedad de tecnologías conduce a problemas de compatibilidad del navegador. Las galletas más comunes aquí pueden ser las cookies.
Una nueva experiencia en HTML5En respuesta a los problemas anteriores, HTML5 proporciona una solución más ideal: si necesita almacenar datos que se pueden resolver simplemente utilizando pares de clave/valor, puede usar el almacenamiento web.
En comparación con las cookies, el almacenamiento web tiene muchas ventajas, resumidas de la siguiente manera:
1. Espacio de almacenamiento más grande: cada espacio de almacenamiento independiente en IE8 es de 10 m, y otros navegadores tienen implementaciones ligeramente diferentes, pero son mucho más grandes que las cookies.
2. El contenido almacenado no se enviará al servidor: cuando se establece una cookie, el contenido de la cookie se enviará junto con la solicitud en el servidor, que es un desperdicio de ancho de banda para los datos almacenados localmente. Los datos en el almacenamiento web solo existen localmente y no interactuarán con el servidor.
3. Interfaces más ricas y fáciles de usar: el almacenamiento web proporciona un conjunto más rico de interfaces, lo que facilita la operación de datos.
4. Espacio de almacenamiento independiente: cada dominio (incluido el subdominio) tiene espacio de almacenamiento independiente, y cada espacio de almacenamiento es completamente independiente, por lo que no causará confusión de datos.
Clasificación de almacenamiento webEl almacenamiento web en realidad consta de dos partes: SessionStorage y LocalStorage.
SessionStorage se utiliza para almacenar datos en una sesión localmente, a la que solo se puede acceder en las páginas en la misma sesión y los datos se destruirán después de finalizar la sesión. Por lo tanto, SessionStorage no es un almacenamiento local persistente, sino solo un almacenamiento a nivel de sesión.
LocalStorage se utiliza para el almacenamiento local persistente, y los datos nunca caducarán a menos que se elimine activamente.
Compruebe si el almacenamiento web es compatibleEl almacenamiento web es compatible con los principales navegadores convencionales, pero para ser compatibles con los viejos navegadores, aún necesitamos verificar si esta tecnología puede usarse.
El primer método: verifique si el navegador admite el almacenamiento web al verificar si existe el objeto de almacenamiento:
if (typeof (almacenamiento)! == "indefinido") {
// ¡Sí! LocalStorage y SessionStorage Support!
// algún código ...
} demás {
// ¡Lo siento! Sin soporte de almacenamiento web.
}
La segunda forma es verificar los objetos respectivos por separado, como verificar si LocalStorage lo admite:
if (typeof (localStorage) == 'Undefined') {
alerta ('Su navegador no admite HTML5 LocalStorage. Pruebe la actualización');
} demás {
// ¡Sí! LocalStorage y SessionStorage Support!
// algún código ...
}
o:
if ('localStorage' en Window && Window ['LocalStorage']! == NULL) {
// ¡Sí! LocalStorage y SessionStorage Support!
// algún código ...
} demás {
alerta ('Su navegador no admite HTML5 LocalStorage. Pruebe la actualización');
}
o
if (!! localstorage) {
// ¡Sí! LocalStorage y SessionStorage Support!
// algún código ...
} demás {
alerta ('Su navegador no admite HTML5 LocalStorage. Pruebe la actualización');
}
Obviamente, el primer método es el más directo y simple.
Uso del almacenamiento webEl almacenamiento web almacena pares de valores clave, y el navegador lo almacena como una cadena. Recuerde convertirlos a otros formatos cuando sea necesario.
Excepto por los diferentes usos de SessionStorage y LocalStorage, la lista de miembros es la misma:
clave = valor: almacenar pares de valor de clave
SetItem (clave, valor): Guardar pares de valores clave
getItem (clave): obtener el par de valor clave
RemoTitem (clave): elimine todos los pares de valor de tecla
Clear (): Borre todos los pares de valor clave
Longitud: el número de pares de valor clave
Aquí aún necesitamos enfatizar: el tipo de valor en el método SetItem (clave, valor) en teoría puede ser de cualquier tipo, pero de hecho el navegador llamará al método de valor de valor para obtener su valor de cadena y almacenarlo localmente. Por lo tanto, si es un tipo personalizado, debe definir un método de tostración significativo por su parte. Por ejemplo, el siguiente ejemplo se usa junto con json.stringify:
var persona = {'nombre': 'Rainman', 'Age': 24};
localstorage.setItem ("me", json.stringify (persona));
Json.parse (localstorage.getitem ('me')). Nombre; // 'Rainman'
/**
* Json.stringify, convierta los datos de JSON en cadenas
* Json.stringify ({'name': 'Fred', 'Age': 24}); // '{"nombre": "Fred", "Age": 24}'
* Json.stringify (['a', 'b', 'c']); // '["A", "B", "C"]'
* JSON.PARSE, JSON Anti-solucionamiento.
* JSON.PARSE ('["A", "B", "C"]') // ["A", "B", "C"]]
*/
Además, al agregar pares de valor clave, si el número de agregado es grande, es más seguro verificar si hay alguna excepción que exceda el límite:
intentar {
localStorage.SetItem (itemId, value.Join (';'));
} catch (e) {
if (e == cuota_exceded_err) {
alerta ('Cuota excedida!');
}
}
El método de almacenamiento web es muy simple. El siguiente ejemplo es contar el número de clics en el botón:
<! Doctype html>
<html>
<Evista>
<script>
función clickcounter ()
{
if (typeof (almacenamiento)! == "indefinido")
{
if (localStorage.ClickCount)
{
localStorage.ClickCount = Number (localStorage.ClickCount) +1;
}
demás
{
LocalStorage.ClickCount = 1;
}
document.getElementById ("resultado"). innerhtml = "Ha hecho clic en el botón" + localStorage.ClickCount + "Time (s)";
}
demás
{
document.getElementById ("resultado"). innerhtml = "Lo siento, su navegador no admite el almacenamiento web ...";
}
}
</script>
</ablo>
<Body>
<p> <botón onClick = "clickcounter ()" type = "botón"> ¡Haga clic en mí! </botón> </p>
<div id = "resultado"> </div>
<p> Haga clic en el botón para ver el aumento del contador. </p>
<p> Cierre la pestaña del navegador (o ventana), e intente nuevamente, y el contador continuará contando (no se restablece). </p>
</body>
</html>
En el ejemplo anterior, puede cambiar LocalStorage a SessionStorage, hacer clic en el botón varias veces y verificar el efecto antes y después de cerrar el navegador.
Problemas existentesLos defectos del almacenamiento web se concentran principalmente en su seguridad, que se reflejan en los siguientes dos puntos:
1. El navegador asignará espacio de almacenamiento independiente para cada dominio, es decir, el script no puede acceder al espacio de almacenamiento en el dominio B en el dominio A, pero el navegador no verificará si el dominio donde se encuentra el script es el mismo que el dominio actual. Es decir, los scripts integrados en el dominio A en el dominio B aún pueden acceder a los datos en el dominio B.
2. Los datos almacenados localmente no están encriptados y nunca caducarán, lo cual es muy fácil de causar fugas de privacidad.
Además, para obtener más problemas relacionados con la seguridad, consulte el enlace en la referencia práctica más adelante.
Una lista de otras especificaciones (solo para comprender, tal vez desaparecerá en cualquier momento)base de datos web
En la antigua propuesta HTML5, si necesita almacenar datos complejos, puede usar la base de datos web, que puede usar SQL como un programa de cliente (el estándar de la base de datos web ha sido abandonado, por lo que aquí hay una breve mención); almacenamiento globalEsto también se propone en HTML5. Después de que se cierra el navegador, la información almacenada utilizando GlobalStorage aún se puede conservar. Al igual que LocalStorage, la información almacenada en cualquier página del dominio puede ser compartida por todas las páginas, pero actualmente solo Firefox la admite.
Sintaxis básica:
• GlobalStorage ['desarrollador.mozilla.org'] - Todos los subdominios bajo desarrollador.mozilla.org se pueden leer y escribir a través de este objeto de almacenamiento del espacio de nombres.
• GlobalStorage ['mozilla.org']: todas las páginas web bajo el nombre de dominio Mozilla.org se pueden leer y escribir a través de este objeto de almacenamiento del espacio de nombres.
• GlobalStorage ['org']: todas las páginas web bajo el nombre de dominio .org se pueden leer y escribir a través de este objeto de almacenamiento del espacio de nombres.
• GlobalStorage ['']: cualquier página web bajo cualquier nombre de dominio se puede leer y escribir a través de este objeto de almacenamiento del espacio de nombres.
Propiedades del método:
• SetItem (clave, valor): establezca o restablezca el valor de la clave.
• GetItem (Key): obtiene el valor clave.
• RemoutItem (clave): elimina el valor de la clave.
• Establezca el valor de clave: Window.GlobalStorage [planabc.net] .key = valor;
• Obtener el valor clave: valor = window.globalStorage [planabc.net] .key;
Otras características:
• El tiempo de vencimiento es el mismo que LocalStorage, y algunas otras características también son similares a LocalStorage.
• Firefox ahora solo admite el almacenamiento de GlobalStorage bajo el dominio actual. El uso de un dominio común causará un código de error de seguridad de error similar: 1000.
IndexeddbFinalmente, queremos introducir indexeddb. En comparación con las otras dos especificaciones, solo Firefox actualmente implementa IndexedDB (por cierto, Mozilla dice que nunca implementarán la base de datos de SQL web), pero Google ha dicho que está considerando agregar el soporte IndexDB a Chrome.
IndexedDB presenta el concepto de un almacén de objetos, que es un poco como una base de datos SQL donde puede almacenar registros en la base de datos, y cada registro puede tener muchos campos, cada campo tiene un tipo de datos específico, puede elegir un subconjunto de registros y atravesarlo con el cursor, mientras que todos los cambios en el almacén de objetos están basados en transacciones.
Para obtener más información, consulte la documentación sobre IndexedDB en Firefox en la referencia de uso más adelante.
Referencia práctica:Documento oficial: http://www.w3schools.com/html5/
Preocupaciones de la plantilla: http://www.cuoxin.com/w3school/html5/
Seguridad del almacenamiento local: http://www.mhtml5.com/2012/03/4586.html
Características experimentales de Firefox indexedDB: https://developer.mozilla.org/en-us/docs/indexeddb