cómo almacenar datos temporales en el lado del cliente y luego enviarlo al servidor

Question

necesito para almacenar datos de forma temporal en el lado del cliente para permitir a los usuarios añadir, editar o eliminar elementos sin tener que consultar el servidor para cada uno de estas acciones; justo cuando el usuario termina de agregar elementos y hace clic en el botón Agregar, la lista se envía al servidor para guardarse permanentemente.

Este image describe lo que quiero lograr. Yo sé que tengo que utilizar matrices en JavaScript, pero yo no sé cómo crear uno para almacenar objetos (en este caso Detalle que contiene: id, precio y descripción).

Espero que me puedan ayudar. Gracias de antemano. PD: Estoy usando JSP y ... lo siento por mi Inglés

Answer 1

Claro, ya que es una mesa que tiene sentido tener una matriz de objetos. Tenga en cuenta que un objeto está rodeado por llaves y un conjunto está rodeado por paréntesis:

var myArray = []; // Initialize empty array 
var myObject = {}; // Initialize empty object 

Esto debería lograr lo que necesita:

// Initialize variables 
var newEntry, table = []; 

// Create a new object 
newEntry = { 
    id: '', 
    price: '', 
    description: '' 
}; 

// Add the object to the end of the array 
table.push(newEntry); 

Cuál es el mismo que esto:

// Initialize array 
var table = []; 

// Create object and add the object to the end of the array 
table.push({ 
    id: '22', 
    price: '$222', 
    description: 'Foo' 
}); 

Ahora puede acceder a propiedades como esta: tabla [0] .id; // '22'

En los navegadores modernos, si desea que los datos en distintas sesiones (como galletas) que podrían utilizar los objetos sessionStorage o localStorage.

Cuando se desea enviar los datos al servidor, podrás enviar una versión JSON de la mesa a través del cable:

var data = JSON.stringify(table); 

Answer 2

Suena como un buen trabajo para JSON.

Answer 3

Puede crear una matriz de objetos personalizados Detalle bastante fácilmente con objetos literales:

var details = []; 
details.push({id:'abc1234', price:999.99, description:'Tesla Roadster'}); 
details.push({id:'xyz5678', price:129.99, description:'Land Rover'}); 

Luego de enviar los datos al servidor cuando el usuario hace clic en "Añadir".