So speichern Sie temporäre Daten auf der Clientseite und senden Sie es dann an den Server

Question

Ich muss Daten vorübergehend auf der Clientseite speichern, damit Benutzer Elemente hinzufügen, bearbeiten oder löschen können, ohne den Server für jeden einzelnen abfragen zu müssen diese Aktionen; Sobald der Benutzer das Hinzufügen von Elementen abgeschlossen und auf die Schaltfläche Add geklickt hat, wird die Liste zum dauerhaften Speichern an den Server gesendet.

Diese image beschreibt, was ich erreichen möchte. Ich weiß, dass ich Arrays in JavaScript verwenden muss, aber ich weiß nicht, wie man einen zum Speichern von Objekten erstellt (in diesem Fall Detail, das enthält: ID, Preis und Beschreibung).

Ich hoffe, Sie können mir helfen. Vielen Dank im Voraus. PS: Ich benutze JSP und ... sorry für mein Englisch

Answer 1

Sicher, da es eine Tabelle ist, macht es Sinn, eine Reihe von Objekten zu haben. Beachten Sie, dass ein Objekt von geschweiften Klammern umgeben ist und ein Array von Klammern:

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

Dies erreichen sollten, was Sie brauchen:

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

welches das gleiche wie das ist:

// Initialize array 
var table = []; 

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

Sie können jetzt auf Eigenschaften wie folgt zugreifen: Tabelle [0] .id; // '22'

Wenn in modernen Browsern die Daten über Sitzungen (wie Cookies) hinweg beibehalten werden sollen, können Sie die sessionStorage- oder localStorage-Objekte verwenden.

var data = JSON.stringify(table); 

Answer 2

Klingt wie ein guter Job für JSON.

Answer 3

Sie können ein Array der benutzerdefinierten Details Objekte ziemlich leicht mit Objektliterale erstellen: „In“

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

Dann können Sie Ihre Daten auf dem Server bereitstellen, wenn der Benutzer klickt