Almacenamiento web
sessionStorage: Los datos almacenados en la sesión de objeto. La llamada de la sesión , se refieren al usuario cuando navega por un sitio Web, cerrado transcurrido desde que entra en el sitio para el navegador este momento, el usuario está navegando por el sitio lleva su tiempo. Sesión objeto puede ser utilizado durante este tiempo ahorrado como se reivindica en cualquiera de los datos almacenados.
localStorage: Los datos almacenados localmente en los dispositivos de hardware del cliente, incluso si se cierra el navegador, los datos todavía existe, que todavía puede seguir utilizando la próxima vez que abra un navegador para acceder al sitio.
L la sessionStorage y localStorage diferencia
1. localStorage sido almacenado en el almacenamiento de datos local es permanente, a menos que el usuario las borra o programa; sessionStorage efectiva en el período de sesiones, los datos se eliminan automáticamente cuando se cierra el navegador;
2. localStorage se basa en el dominio puede acceder a cualquier página dentro de ese dominio, sessionStorage en el ahorro de su ventana, y la nueva ventana creada por la ventana actual en vigor hasta que la pestaña asociada con cerrada
Galleta la distinción de sessionStorage y localStorage
1.cookie pasó de ida y vuelta entre el navegador y el servidor, y sessionStorage localStorage no
mayor 2.sessionStorage y localStorage de espacio de almacenamiento, hay más rica de usar interfaz, el espacio de almacenamiento independiente
El almacenamiento de datos
localStorage.setItem("key", "value);
La adquisición de datos
var val = localStorage.getItem("key");
La eliminación de datos
var val = sessionStorage.removeItem(key);Borrar datos
sessionStorage.clear();
aplicación offline (sin conexión caché)
pasos:
1, escribir un tipo de archivo de manifiesto que las listas deben ser almacenado en caché en el explorador de archivos de recursos locales.
2, el desarrollo de una página Web, el elemento <html> de atributo "manifiesto" se manifestará archivo con la unión de la página.
3, para configurar el servidor para que se pueda leer el tipo de archivo de manifiesto.
manifiesto
Detalla: el archivo de manifiesto es un archivo de texto simple en las listas de archivos el nombre del archivo no necesita ser almacenado en caché o caché archivo de recursos, los recursos y las vías de acceso a estos archivos en una lista. Puede especificar una página de cada archivo de manifiesto sola, puede especificar un total de archivo de manifiesto para toda la aplicación Web.
En las aplicaciones móviles, páginas web cuando el navegador para establecer contacto con el servidor, el navegador va a almacenar en caché de acuerdo con la lista de archivos que aparecen en el manifiesto, el archivo de recursos correspondiente caché local.
Función: los archivos que necesitan ser salvadas, lo que no es necesario guardar el archivo, en línea y fuera de línea los archivos a la llamada
formato:
| manifiesto de caché | Indica el número de versión |
| CACHE | Cuando se expresa en línea del navegador de archivos de caché localmente a la lista de recursos del servidor. Al escribir tipo de archivo de manifiesto de una página, la página no se necesita poner en la lista ya que el navegador almacena en caché de forma automática en esta página en caché los recursos locales. |
| RED | Una lista de los recursos expresó la necesidad de acceder a los archivos cuando están en línea, estos archivos sólo se puede acceder a establecer un vínculo entre el navegador y el servidor. Si se establece en "*", dijo que aparte de la "cache:" no fuera de la etiqueta de caché local marcó a los archivos de caché. |
| RETROCEDER | Expresado en pares listados en el archivo no acceder a los archivos en el banco. Donde el primero es archivos inaccesibles, lo cual es un archivo sustituto, es decir, cuando los archivos inaccesibles "/Project/Index.jsp", los intentos del navegador para acceder al archivo "/BkProject/Index.jsp". |
nota:
(1) En el archivo de manifiesto, la primera línea debe ser "manifiesto de caché", indica que se trata de un formato de recursos del servidor de archivos almacenados en caché local del navegador.
(2) en el momento de escribir comentarios que empezar una nueva línea, y el "#" al principio.
Contenido (3) permite volver a escribir el archivo de manifiesto la marca de clasificación que se puede escribir múltiples "cache:" etiquetar o marcar los otros dos.
(4) Si no se encuentra la clasificación de la etiqueta, se considera "cache:" archivos de recursos y etiquetas.
(5) recomendaciones indican el número de versión de cada tipo de manifiesto de archivo como comentario, para su uso en la actualización del archivo. Por ejemplo, en el código de demostración anterior, "# versión 0.0.0" representa el número de versión de forma predeterminada.
<html manifest="mr.manifest">
...
</html>
web de SQL
Abrir / crear la base de datos
//openDatabase可以打开一个已经存在的数据库，如果不存在则创建
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
mydb：数据库名称
1.0：版本号
Test DB：描述文本
2*1024*1024：数据库大小，2MBCrear una tabla
function crateTable() {
var sql = 'create table if not exists t_plan(title, content, target_time,create_time)';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
$("#msg").html('创建表成功');
}, errorCallback);
});
}
================
sql：执行的SQL语句
null：参数，用于动态传参
fuction(tx,rs)：成功函数
errorCallback：失败回滚CRUD
function addPlan(values) {
var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
$("#msg").html('影响记录条数:' + effectRow);
}, errorCallback);
});
}
function deletePlan(values) {
var sql = 'DELETE FROM t_plan WHERE title = ?';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
$("#msg").html('影响记录条数:' + effectRow);
}, errorCallback);
});
}
function updatePlan(values) {
var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
$("#msg").html('影响记录条数:' + effectRow);
}, errorCallback);
});
}
function getPlanList() {
var sql = 'SELECT * FROM t_plan';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
$("#msg").html('list:' + rs.rows+"<br/>");
$("#msg").html('item:' + JSON.stringify(rs.rows.item(0)));
$("#msg").html('item:' + JSON.stringify(rs.rows.item(0)));
$("#msg").html('item:' + rs.rows.item(0).title);
}, errorCallback);
});
};
IndexDB
Abrir / crear la base de datos
// 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库
var request = window.indexedDB.open('myDatabase', '1');
indexedDB.open () devuelve el método un objeto IDBRequest. Los objetos de error de tres eventos, el éxito, upgradeneeded, el resultado de la operación de procesamiento para abrir la base de datos.
==============error============
request.onerror = function (event) {
console.log('数据库打开报错');
};
==============success===========
var db;
request.onsuccess = function (event) {
db = request.result;
console.log('数据库打开成功');
}; //通过request对象的result属性拿到数据库对象
=============upgradeneeded======
var db;
request.onupgradeneeded = function (event) {
db = event.target.result;
}
Crear una tabla
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
CRUD
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: '[email protected]' });
=================
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1);
=================
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: '[email protected]' });
================
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1);
request.onsuccess = function( event) {
if (request.result) {
console.log('Name: ' + request.result.name);
}
}
=======遍历========
var objectStore = db.transaction('person').objectStore('person');
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log('Name: ' + cursor.value.name);
}
}
