Comentario: Este artículo presenta principalmente los ejemplos de uso simple de LocalStorage, Local Database y SessionStorage en el almacenamiento local HTML5. Los amigos que lo necesitan pueden referirse a él.
Una característica muy genial de HTML5 es el almacenamiento web, similar a las cookies anteriores, pero la diferencia es que el almacenamiento web tiene una capacidad local de 5 megabytes para almacenar, mientras que las cookies solo tienen 4K, lo cual es una ventaja que no se puede comparar.
WebStrange se divide además en: LocalStorage, SessionStorage y Local Database.
A continuación, lo presentaré uno por uno:
1. CONTINACIÓN LOCAL
El uso de LocalStorage es relativamente simple, y los métodos son:
localstorage.setItem (clave, valor); // Guardar datos
localstorage.getItem (clave); // leer datos
localstorage.removeItem (clave); // eliminar datos individuales
localStorage.Clear (); // Eliminar todos los datos
Clave: localStorage.Key (índice); // Obtener el valor de un cierto índice
Una pequeña demostración para mostrar la función:
(función ($) {
$ (function () {
$ .fn.getformparam = function () {
var serializeObj = {};
var array = this.serializearRAy ();
var str = this.serialize ();
$ (array) .each (function () {
if (serializeObj [this.name]) {
if ($. isarray (serializeObj [this.name])) {
SerializeObj [this.name] .push (this.Value);
}demás{
SerializeObj [this.name] = [SerializeObj [this.name], this.Value];
}
}demás{
SerializeObj [this.name] = this.Value;
}
});
return serializeobj;
}; </p> <p> var StorageFile = json.parse (window.localstorage.getitem ('demo'));
$ .each (StorageFile, function (i, val) {
$ ('#demoForm'). find ('[name = "'+i+'"]'). Val (val);
}); </p> <p> $ ('#demoForm'). find ('[type = "enviar"]'). on ('click', function () {
var data = $ ('#demoForm'). getFormParam ();
Window.localStorage.SetItem ('demo', json.stringify (data));
devolver falso;
});
});
}) (jQuery)
Código HTML:
<! Doctype html>
<html lang = "zh">
<Evista>
<meta charset = "utf-8">
<script src = "jQuery-1.10.2.min.js"> </script>
<script src = "demo.js"> </script>
<title> documento </title>
</ablo>
<Body>
<form>
<p> <label> <span> name </span> <putin> </label> </p>
<p> <label> <span> edad </span> <put> </selabet> </p>
<p> <label> <span> Número de estudiante </span> <nipping> </label> </p>
<p> <label> <span> dirección </span> <put> </selabel> </p>
<p> <label> <span> pasatiempos </span> <put> </selabet> </p>
<p> <label> <span> otros </span> <textarea cols = "30" Rows = "10"> </xtexarea> </label> </p>
<p> <input type = "Subt" value = "Subt"> </p>
</form>
</body>
</html>
De esta manera, se implementa una demostración simple que muestra el almacenamiento local
2. SessionStorage
El uso de SessionStorage es el mismo que el de LocalStorage, pero SessionStorage se borrará cuando el navegador cierra el sitio web, y LocalStorage se guardará en el navegador, y ambos se utilizarán juntos según corresponda.
3. Base de datos local
Los estudiantes que están familiarizados con el desarrollo de iOS/Android deben estar más familiarizados con las bases de datos SQLite
El funcionamiento de la base de datos en HTML5 es relativamente simple, incluyendo principalmente el método OpenDatabase y el método de transacción
Use un objeto DB para recibir objetos creados por OpenDatabase para acceder a la base de datos
var db = OpenDatabase (DataBAsename, Versión, Descripción, Tamaño)
en
DataBASEname: nombre de la base de datos
Versión: la versión de la base de datos se puede ignorar
Descripción: Descripción de la base de datos
Tamaño: el tamaño del espacio asignado a la base de datos
El método de transacción utiliza una función de devolución de llamada como parámetro para ejecutar un método específico para acceder a la base de datos en la función.
db.transaction (function (tx)) {
tx.executesql (sqlQuery, [value1, value2 ..], datahandler, errorhandler)
});
Los cuatro parámetros del método Executesql son:
SQLQuery: declaraciones SQL que deben ejecutarse específicamente, Crear || SELECT || Update || Delete;
[Value1, Value2 ..]: Una matriz de todos los parámetros utilizados en la instrucción SQL. En el método ExecutesQL, los parámetros que se utilizarán en la instrucción SQL se reemplazan primero con?, Y luego estos parámetros están compuestos de una matriz a su vez y se colocan en el segundo parámetro;
Datahandler: ejecute la función de devolución de llamada exitosa;
ErrorHandler: la función de devolución de llamada no pudo ejecutarse;