almacenamiento web detallada (galleta, sessionStorage, localStorage, IndexedDB)

Una, almacenamiento web concepto Introducción

1. ¿Cuál es la tienda web?

Se refiere al proceso de comunicación web de almacenamiento web por parte del cliente (por ejemplo, navegador) de almacenamiento local para pequeñas cantidades de datos (Nota: Esta es una amplia red de dicho nivel de almacenamiento en lugar de almacenamiento Web). tipos de almacenamiento web, incluyendo edad, galletas, así como la introducción de HTML5 sessionStorage, localStorage y IndexedDB y así sucesivamente.

entorno de alojamiento web normalmente se almacena en el navegador, con interfaces de JavaScript proporcionadas por el navegador, que pueden alcanzar estas adiciones y supresiones en los datos de cambio de búsqueda.

2. ¿Por qué tienda web?

Esta es la más antigua de las cookies desde el principio.

cookie de nacimiento deriva de una contradicción: el protocolo HTTP no tiene estado, hay una distinción entre el servidor y las necesidades reales de los diferentes clientes.

En primer lugar entender sin estado protocolo http. Se refiere a un sin estado, el protocolo HTTP para cualquier transferencia de datos hay capacidad de memoria. Por ejemplo, si un cliente con su servicio envía un mensaje, luego se acercó el servidor envía otro mensaje, el servidor no puede conocer estos dos mensajes desde el mismo cliente.

La razón por la que desea protocolo HTTP diseñado para apátrida, porque quieren mantener el estado de conexión de todos los clientes en el comportamiento del consumo del servidor de grande, lo que puede limitar severamente la capacidad del servidor concurrente. Y en la mayoría de los casos, para mantener este estado no aporta ningún beneficio. Lo que los diseñadores de protocolo http simplemente no mantener el estado.

Sin embargo, en muchos casos, el servidor debe distinguir entre los diferentes clientes. Tome Taobao que, al recibir una solicitud de pedido, el servidor debe saber qué usuario la siguiente, lo que requiere que se debe conocer la solicitud de inicio de sesión único actual y qué solicitudes anteriores del mismo cliente (o el cliente de cada uno tiempos deben enviar una solicitud de información de sus cuentas y tomar todos los parámetros).

Con este fin, la sesión de diseño de servidor (sesión) mecanismo. Después de un usuario inicia sesión, el servidor crea un objeto de sesión para el usuario, el almacenamiento de parámetros (tales como nombre de usuario, el tiempo de inicio de sesión, etc.) asociado con el usuario, el objeto hasta que el usuario cierra la sesión o tiempo de espera de entrada será destruido. Cada objeto de sesión tiene un identificador único, siempre y cuando el cliente se realiza en la solicitud se envía a continuación, en la identificación, el servidor puede determinar qué petición del usuario se envía.

De esta manera, el cliente debe tener un mecanismo para almacenar los identificadores para asegurarse de que puede llevar a la identificación de cada solicitud antes de Entrar. Así, nació la galleta.

Cuando un usuario inicia sesión, el servidor crea una sesión para el usuario (sesión) objetos, entonces la respuesta escrita sesión de servidor parámetro id del objeto envía al cliente. El cliente recibe la respuesta al parámetro extraído, almacenado en el navegador. Cada posterior lleva esta identificación, de acuerdo con esta ID de servidor, lo que puede determinar que la solicitud del usuario en el momento de solicitud de transmisión. Este campo en particular se utiliza para almacenar el id, llamado cookie (por supuesto, galleta sólo puede almacenar ID de sesión, también puede almacenar otros parámetros).

Por lo tanto, el papel básico es llevar la cookie de identificación de usuario, para ayudar al servidor de distinguir los diferentes clientes.

Después de que los tipos de galletas de la memoria: la razón sessionStorage, localStorage y IndexedDB parece muy simple: cuantos más datos de la sesión almacenados en el navegador, se puede reducir el tráfico de red, mejorar el rendimiento del sitio (aunque esta cookie también se puede utilizar, pero capacidad individual sólo es de 4 KB, que no es adecuado para tales propósitos).

Dos, almacenamiento web Detallado

1. galletas

Por encima tenemos la fuente de la galleta en detalle, pero aquí es introducir el uso de cookies y características.

Cookies HTTP Cookies refiere, se transmite en el encabezado de solicitud HTTP respuesta Set-Cookie HTTP como parte de la cadena por la forma nombre = valor almacenado. Después de recibir la respuesta en el extremo distal, se almacena en una cookie del navegador, y lleva la cadena cada vez que una petición del usuario.

galleta document.cookie se puede obtener en el extremo delantero, tales como:

> document.cookie
< "_ga=77911531582348967; _gid=10966846041582958782"

Por encima de las cookie almacena un total de dos parámetros: _ga y _gid, dos parámetros separados por un punto y coma y un espacio. sí encodeURIComponent galletas se codifica, y por lo tanto, si la cookie contiene china, necesidad de dar el valor correspondiente a decodificada correspondiente decodeURIComponent.

Además de la clave y el valor, cada parámetro también llevará a varias otras propiedades, incluyendo el dominio, la ruta, tiempo de caducidad, las señales de seguridad, etc. Estos parámetros no pueden ser vistas cuando se utiliza la salida document.cookie, pero se puede ver en la herramienta de depuración:

significando varios parámetros anteriormente son:

1. clave, nombre de la clave.
2. valor, el valor de la clave.
3. dominio de la cookie de dominio, dominio de las cookies, es decir, el dominio del sitio se encuentra, debe tenerse en cuenta que, no es el número de casos y el puerto.
4. Trayectoria, trayectoria almacenamiento de cookies, la ruta predeterminada es la raíz del proyecto actual.
5. Expira / Max-Edad, tiempo de caducidad de la cookie, en milisegundos. El valor predeterminado expira en la sesión falla cuando no se establece.
6. Tamaño, tamaño de las cookies.
7. HttpOnly, aunque sólo sea a través de la transmisión de solicitud HTTP. Algunos de galletas importante (como sessionId), sólo puede ser establecido por el fondo y no tiene la libertad de modificar, puede establecer esta bandera.
8. Segura, las señales de seguridad. Después de ajustar los parámetros, se llevará a la cookie sólo en la solicitud HTTPS.
9. SameSite, con el fin de prevenir los ataques CSRF y pista de usuario y las nuevas propiedades de seguridad, se refiere específicamente a Ruan Yifeng: propiedad SameSite de Cookie .

En general, cookie sólo para guardar la información de acceso asociada con, el más importante es el identificador de sesión del servidor (sesión) objetos. No es adecuado para el almacenamiento de grandes cantidades de datos, ya que el navegador limita el tamaño de cada galleta no puede exceder de 4 KB. Además, la cookie del navegador es también el número de dominio único bajo restricciones, el número varía dependiendo del navegador, para los desarrolladores, este número no es generalmente más de 20.

La cookie predeterminado expirará al final de la sesión, puede modificar manualmente max-ageo Expiresparámetros para ajustar el tiempo de caducidad de la cookie, la primera se define cookies expiran después de cuántos segundos, mientras que el segundo se define galletas fallar en algún momento. Si ambos de estos dos parámetros, el máximo de edad más alta prioridad.

Muy simple de añadir parámetros de la cookie:

document.cookie = "name=oeschger";
document.cookie = "favorite=tripe;max-age=120;path=/";
alert(document.cookie);
// 显示: name=oeschger; favorite=tripe

Tenga en cuenta que aunque otros parámetros que nos fijamos para el favorito no se imprime document.cookie, pero siguen siendo válidos. El ejemplo anterior fallará cuando la destrucción del servidor de nombre de la sesión, será el favorito fallado después de 120 segundos.

Eliminar cookie no proporciona parámetros de conexión directa, que se puede obtener max-age el parámetro se establece en 0 o para ajustar la hora actual expira para invalidar inmediatamente eliminar la cookie con el fin de conseguir el objeto, como por ejemplo:

document.cookie = "favorite=; max-age=0;";

Esto se puede eliminar de la galleta favorita.

tienda de galletas como un cliente, hay una gran arquitectura extremo ventaja, la influencia no es el servicio. Sabemos que en una arquitectura distribuida, sesión difícil para compartir entre los distintos servidores. La cookie no es en absoluto un problema, que se almacena en el cliente, que puede ser enviado a cualquier servidor.

Al mismo tiempo, galleta hay algunas deficiencias obvias. Es un problema de seguridad, galleta almacenada en la información de autenticación del cliente, en caso de robo, podría producir pérdidas impredecibles. Otro problema mencionado anteriormente es la capacidad, que no es tan ampliamente utilizado tienda de galletas web. Además, el costo de rendimiento de la comunicación cookie no puede ser ignorada. Dado que todos los parámetros de la cookie se realizarán en cada vez que envía una solicitud al programa de fondo, si la cookie es grande, que dará lugar a cada petición HTTP aumenta de volumen, afecta a la velocidad de respuesta del sitio. En resumen, cookie sólo para ahorrar una cantidad muy pequeña de la información de autenticación de usuario, y la necesidad de garantizar la seguridad de transmisión de la política de cifrado de cookies.

2. sessionStorage 和 localStorage

¿Por qué adoptar puso juntos en estos dos?

Debido a que son heredados de Storagelos principios de la gramática y tienen una alta similitud, que Internet ha introducido un gran número de artículos sobre las similitudes y diferencias entre los dos. Echemos un vistazo a sus similitudes:

(1) los mismos puntos

1. En principio, ambos de los cuales se almacenan en el navegador . El primero se llama "almacenamiento de sesión", que se llama "almacenamiento local". Se despliegan en el objeto de la ventana, se puede acceder de las siguientes maneras:

window.localStorage
// 或者直接访问localStorage

window.sessionStorage
// 或者直接访问sessionStorage

2. Funcionamiento de tanto la sintaxis es la misma (aquí para localStorage por ejemplo):

localStorage.setItem("name", "carter");  // 设置name: carter

localStorage.age = "24";   // 设置age: 24

localStorage.getItem("name");  // 获取name的值carter

localStorage.removeItem("name"); // 删除name

localStorage.clear();  // 清空localStorage

sessionStorage sintaxis anterior.

3. Ambos siguen la misma política de origen . Esa es la única tienda se pueden compartir en el mismo dominio, entre dominios no pueden acceder, por lo que puede garantizar la seguridad de los datos.

4.localStorage sessionStorage y cada uno tiene 5 MB de espacio de almacenamiento, y sólo almacenan un tipo de datos de cadena . Para el tipo no-cadena de datos requiere típicamente el uso JSON.stringifymétodo de compresión en una cadena, entonces el uso de JSON.parseanálisis sintáctico.

(2) puntos diferentes

1. El tiempo de falla son a la vez diferentes .
localStorage sí mismo no puede ser engañado, incluso si se cierra el navegador, la próxima vez que visite el sitio sigue siendo válida. localStorage no proporciona un método directo para establecer el tiempo de expiración, tenemos que utilizar una estrategia especial para eliminar periódicamente localStorage:

localStorage.setItem("name", JSON.stringify({
  value: "carter",
  time: (new Date()).getTime() // 保存时间戳
}))

function getItem(key, maxAge){
  let obj = localStorage.getItem(key);
  if(obj){  // 获取变量值对象
    obj = JSON.parse(obj);
  }
  // 存储时间小于最大生命周期时才读取该参数，否则将其清除
  if((new Date()).getTime() - obj.time < maxAge){
    return obj.value;
  } else {
    localStorage.removeItem(key);
    return "";
  }
}

getItem("name", 60 * 60 * 1000);  // 失效时间为1小时

En términos simples, es salvar localStorage tiempo juntos en el almacenamiento, el valor del tiempo y luego determinar manualmente si un tiempo de espera.

Pero sesión sessionStorage está ligado a la página, una página cuando caduque la sesión, se borrará el sessionStorage correspondiente. Tenga en cuenta que, sessionStorage única expirará a los fallos de página de sesión, es decir para restaurar o actualizar la página cuando la página actual (por ejemplo, haga clic en el botón Atrás de su navegador, o usar la página de su navegador a restaurar la función) de alguna manera, sessionStorage y no fallará, en otras palabras, cuando se crea una página sessionStorage, sessionStorage siempre crea su perecen.

2. Los dos alcance efectivo diferente .
Sin multidominio, localStorage a través de pestañas tenga efecto, pero sessionStorage sólo dentro del ámbito de aplicación de la pestaña actual.

Esto significa que si se abre una nueva, la nueva página se compartirán páginas localStorage y la página actual y la página con el dominio actual, pero no pueden compartir sessionStorage. Y si se abre la página actual en el marco flotante, y no hay entre dominios, y luego localStorage sessionStorage todo puede ser compartida.

3. IndexedDB

Aunque el espacio 5M ha sido relativamente grande, pero todavía no puede satisfacer todas las necesidades de almacenamiento de front-end.

Esto se debe a la caché de datos front-end para mejorar el rendimiento del sitio web es enorme (http puede reducir efectivamente la cantidad de transmisión de datos, que suele ser el factor más importante que conduce al sitio Caton), lo que más y más sitios tienden a front-end almacenar más datos. sessionStorage localStorage y no puede satisfacer esta demanda, porque, por un lado, su capacidad única de tamaño 5M; por el contrario, ya que el almacenamiento estructurado, cuando la gran cantidad de datos, que funciona lo suficientemente rápido.

Con este fin, la especificación HTML5 lanzó una interfaz de base de datos transaccional IndexedDB. Es capaz de almacenar grandes cantidades de datos estructurados, que tiene de lectura y escritura de rendimiento de base de datos back-end casi comparable (por supuesto, lejos de la funcionalidad y la capacidad y la base de datos back-end).

IndexedDB probablemente tendrá que utilizar el siguiente proceso:

1. Abra la base de datos:

var request = window.indexedDB.open(databaseName, version);

Así que se puede abrir o crear una nueva base de datos indexada. Cuando no existe el nombre de la base de datos de entrada, se creará una nueva base de datos, o que va a abrir una base de datos existente. Cuando se omite el número de versión de la base de datos, si la base de datos ya existe, el valor predeterminado es la versión actual, o el número de versión 1.

2. proceso de registro de sucesos

Después de llamar al método abierto devuelve un IDBRequestobjeto, su registro error, successy upgradeneddedabrir los datos resultantes del evento puede ser procesada.

errorSe indica que la base de datos abierta falló:

request.onerror = function(err){
  console.log("数据库打开失败：" + err);
}

successIndica que la base de datos se abre correctamente, entonces se puede realizar la operación de lectura de la base de datos:

request.onsuccess = function (event) {
  let db = request.result;
  console.log('数据库打开成功');
};

upgradeneededRepresenta las necesidades de base de datos debe ser modernizado, es diferente de la base de datos back-end, IndexedDB cada modificación del contenido de la base de datos debe actualizar la versión de la base de datos:

request.onupgradeneeded = function (event) {
  let db = event.target.result;
}

Cabe señalar que la nueva base de datos en sí operaciones relacionadas se clasifican como versión actualizada de la base de datos, de ahí la necesidad de que el evento upgradeneeded:

request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

3. Las supresiones de búsqueda cambian los datos de ejecución operación

Ya que el trabajo aún tenía que usar IndexedDB, la falta de experiencia práctica, y por lo tanto temporalmente detallado aquí. Si está interesado, por favor refiérase Ruan Yifeng: Base de datos Browser IndexedDB introductoria tutorial .

La relación entre tres front-end y almacenamiento de almacenamiento de back-end

Hemos introducido por encima de cuatro categorías de almacenamiento son todo el almacenamiento de front-end, además de la galleta, los otros tres son accedidos y manipulados por JavaScript directamente.

En sentido estricto, además de la galleta, los otros tres tipos de almacenamiento no están absolutamente necesario, entonces ¿por qué necesitamos frente de la tienda, que fin?

La respuesta es reducir la transmisión de datos HTTP, mejorar el rendimiento del sitio.

Para facilitar la comprensión, ponemos todo el proceso para acceder al sitio para hacer una analogía, es como si nos vamos a la misma biblioteca de la escuela. sitio en toda la colección en sí, estantería es lo que utilizamos la base de datos back-end, y el libro es que todos los datos del sitio web almacenan en una base de datos en los estantes.

sistema de gestión de bibliotecas biblioteca es el fondo del servicio web que proporciona la tarjeta de oficina, búsqueda, préstamo, sino también libros y otros servicios a los usuarios.

Al igual que la lectura de la recepción en la biblioteca, podemos leer sus libros favoritos en la mesa de lectura. Y leemos el libro, es el sitio nos proporciona una página estática.

Entonces, ¿cómo caché front-end para entenderlo?

Es como estamos en la mesa de leer el libro para ser leído a la mano. Imagínese si tenemos que mirar los libros diez a la biblioteca, retirar uno en si cada vez que terminamos una revisión a re estantería, la eficiencia es, obviamente, muy bajo. Esta es la primera vez que vamos a hacerse cargo de todos los libros sobre la mesa diez lectura. Así que para nosotros, esto diez puntas de los dedos sobre el escritorio de libros es nuestra caché de front-end, que son tan cerca de nosotros, así que no hay que repetir el proceso diez veces para encontrar el libro de los estantes.

Hacemos una metáfora más para comprender los diferentes tipos de almacenamiento.

Imagínese, ahora la biblioteca ha introducido un sistema de reservas, cada lector puede querer hacer una cita antes de venir a la biblioteca a la biblioteca de acceso a los libros, la biblioteca será capaz de avanzar en estos pocos libros listos para ser colocado en una separada su área de reserva reservada. Cada área de reserva se corresponde con el objeto de sesión de usuario (sesión), que se almacena en la sesión de servidor.

Así que, ¿cómo saber qué libros de la biblioteca están programados que él? Muy simple, cada zona de reserva corresponde a una persona que lee el número de tarjeta, la tarjeta se pueden eliminar con la lectura de la zona de reserva de libro correspondiente, donde se lee su tarjeta de galletas.

Si usted es un usuario de largo plazo de la biblioteca, la biblioteca específicamente para usted reservó una zona de lectura, siempre se puede leer sus libros aquí, incluso si usted se va, no va a limpiar los libros de la biblioteca. Disponibles de este área de estudio a largo plazo es localStorage.

Si usted es sólo un usuario normal, después de la biblioteca temporal para encontrar un pedazo de una zona de lectura. A continuación, cuando salga de la biblioteca, la biblioteca tendrá que acaba de pedir prestado los libros del distrito escolar a salir limpio. La próxima vez que venga a la biblioteca, debe volver a pedir prestado estos libros, este distrito escolar temporal es sessionStorage.

Entonces, ¿qué es lo IndexedDB? Si necesita a alguien que se celebrarán en la biblioteca de un club de lectura, numerosas número de participantes, la participación de diferentes categorías de libros. Con el fin de garantizar que los participantes de forma rápida a los libros de préstamo, la biblioteca decidió abrir un área separada para usar todos los libros posibles todas clasificadas, y para el club de lectura diseñado un pequeño sistemas de gestión de bibliotecas. Dado que algunas de las características del club de lectura, libro que se encuentre en este estilo diferente región y la gestión de toda la biblioteca (explicar por qué el uso de la base de datos relacional de back-end, y base de datos transaccional front-end), por lo que puede asegurarse de que la pequeña cantidad de libros prestar una mayor eficiencia en el caso. Así que esto abre una zona separada (incluyendo su sistema de gestión de bibliotecas filiales), es una base de datos de IndexedDB front-end.

resumen

El almacenamiento es uno de los navegadores web proporciona a los desarrolladores las funciones más utilizadas, básicamente, ha sido reemplazado por completo con una forma oculta antes de almacenar temporalmente plan de datos.

Quiere dominar todo tipo de almacenamiento web, no sólo para aprender su sintaxis, sino también a prestar atención a sus ciclos de vida, capacidad de almacenamiento, y otros escenarios de uso. Con el desarrollo de la tecnología de front-end y la mejora continua de los requisitos de experiencia de usuario front-end, la necesidad de lugar de almacenamiento de front-end, inevitablemente, cada vez mayor, por lo que ahora no se utiliza comúnmente IndexedDB, en el futuro, incluso puede ser llamado un sitio web estándar. Como desarrollador front-end, deben tener una comprensión global de, y un mayor uso en el trabajo, y más suma.