How to store temporary data at the client-side and then send it to the server

I need to store data temporarily at the client-side to allow users to add, edit or delete items without having to query the server for each of these actions; just when the user finishes adding items and clicks on the Add button, the list is sent to the server to be saved permanently.

This image describes what I want to achieve. I know I have to use arrays in JavaScript, but I don't know how to create one to store objects (in this case Detail which contains :id, price and description).

I hope you can help me out. Thanks in advance. PS: I'm using JSP and... sorry for my English

Answers


Sure, since it's a table it makes sense to have an array of objects. Note that an object is surrounded by curly braces and an array is surrounded by brackets:

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

This should accomplish what you need:

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

Which is the same as this:

// Initialize array
var table = [];

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

You can now access properties like this: table[0].id; // '22'

On modern browsers, if you want the data to persist across sessions (like cookies) you could use the sessionStorage or localStorage objects.

When you want to send the data to the server, you'll send a JSON version of the table across the wire:

var data = JSON.stringify(table);

Need Your Help

Haskell socket recvmsg (path mtu discovery)

sockets haskell

I am writing a tunneling application in Haskell that uses UDP. In order to get it 'right', I would like to set the MTU appropriately. However, I cannot find any easy way to do that.

How to make floating divs fill up space

html css css-float

I'm trying to create a "workflow" bar on a web page.

Excel VBA WorkSheet.Copy After Excel 2013

excel vba excel-vba excel-2013

I want to copy a worksheet and place it DIRECTLY after another sheet. But I having trouble when there are hidden sheets involved.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.