Comment stocker des données temporaires côté client et les envoyer au serveur

Question

J'ai besoin de stocker des données temporairement côté client pour permettre aux utilisateurs d'ajouter, de modifier ou de supprimer des éléments sans avoir à interroger le serveur pour chacun d'entre eux. ces actions; juste au moment où l'utilisateur a fini d'ajouter des éléments et clique sur le bouton Ajouter, la liste est envoyée au serveur pour être enregistrée définitivement.

Ce image décrit ce que je veux réaliser. Je sais que je dois utiliser des tableaux en JavaScript, mais je ne sais pas comment en créer un pour stocker des objets (dans ce cas Détail qui contient: id, prix et description).

J'espère que vous pouvez m'aider. Merci d'avance. PS: J'utilise JSP et ... désolé pour mon anglais

Answer 1

Bien sûr, puisque c'est une table, il est logique d'avoir un tableau d'objets. Notez qu'un objet est entouré par des accolades et un tableau est entouré par des crochets:

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

Cela devrait accomplir ce que vous avez besoin:

// 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); 

Quelle est la même que celle-ci:

// Initialize array 
var table = []; 

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

Vous pouvez maintenant accéder à des propriétés de ce type: table [0] .id; // '22'

Sur les navigateurs modernes, si vous souhaitez que les données persistent à travers les sessions (comme les cookies), vous pouvez utiliser les objets sessionStorage ou localStorage.

Lorsque vous souhaitez envoyer les données au serveur, vous enverrez une version JSON de la table à travers le fil:

var data = JSON.stringify(table); 

Answer 2

Cela ressemble à un bon travail pour JSON.

Answer 3

Vous pouvez créer un tableau de vos objets personnalisés Détail assez facilement avec l'objet littéraux:

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

Ensuite, vous pouvez poster vos données sur le serveur lorsque l'utilisateur clique sur « Ajouter ».