Banking

Learn how to store data in a browser

JavaScript allows you to create your own objects, which lets you create data stores on the client. Here's how.

By Emily A. Vander Veer

JavaScript does more than just provide access to HTML form data. It also lets you create your own objects, which lets you create data stores on the client. You even can create objects that contain other objects.

Why would you want to do that? One good reason is to create an array. Simply put, an array is a table or database that contains sets of related information. In the following example, we define an object called taxTable that contains an array of five instances of the name object. This array will hold the names of five states and their related tax rates. Later, when the user enters a state name in the order form, we'll check it against the array and automatically apply the proper tax.

Creating a five-by-two array may seem like extra work compared to a quick if-then sequence to test for state names. But arrays become more powerful as the number of entries increases. Imagine a table with 50 states or 500 sales regions or 5,000 cities. With an array, you can build the list of entries once and quickly refer to it each time the user enters new data.

This particular piece of JavaScript starts out just like our calculation example. This time, we don't stop with the simple arithmetic, however.

function state(stateName, stateTax){
  //fill the instance with the values passed in
  this.name=stateName;
  this.tax=stateTax;
  //then return the instance of state
  return this;
}

The state() function defined above creates one instance of a state that includes both a name and a tax rate. However, our state doesn't have any values at the moment. Let's give it some.

function taxTable(){
  //the instance of taxTable is filled with
  //an array of state objects
  this[0]=new state("AZ", 0.04);
  this[1]=new state("HI", 0.10);
  this[2]=new state("TX", 0.06);
  this[3]=new state("NJ", 0.08);
  this[4]=new state("", 0.00);
  //return the newly created taxTable to
  //the calling function
  return this;
}

Now, whenever the taxTable function is called, we create five different instances of state numbered 0 through 4. We've created an array that holds all our tax information. Now we need to do something with it.

function calculateTax(stateValue){
  var index=0;
  var result=0;
  var temp=0;

First, we define a function called calculateTax. To start, calculateTax initializes some variables. Then it needs to get a value from the user.

  //while there's an instance of state
  //in the taxGuide array
  while (taxGuide[index]) {
    //if the state passed in is in the
    //taxGuide array
    if (stateValue.toUpperCase() ==
taxGuide[index].name) {
      // put the correct tax rate in "result"
      result = taxGuide[index].tax;
    }
    index++;
  }

The while loop keeps checking the user's input against all the possible entries in the tax table until it runs out of data. Once it finds a match (or no match), it enters the proper tax rate into the result variable. We can then use the tax rate to calculate the amount and add it to our total.

  calcTotal();
  var temp1 = document.orderForm.totalPrice.value;
  // calculate total with tax
  var temp2 =
(parseFloat(temp1) * (1 + parseFloat(result)));
  // chop off extra decimal places
  var totalWithTax =
(Math.round(temp2 * 100)) / 100;
  // change value in form
  document.orderForm.totalPrice.value =
totalWithTax;
}

The above code calculates the total bill, including tax. First, we set the temp1 variable equal to the value in the totalPrice form element. Then we calculate the total with tax and assign it to "temp2." The next line chops off any extra decimal places using the Math.round method and assigns the new total to the totalWithTax variable. Then we send the total back to the order form.

Emily A. Vander Veer is the author of numerous Internet-related magazine articles and books, including JavaScript for Dummies, JavaScript for Dummies Quick Reference, and JavaBeans for Dummies, all published by IDG Books.

Editor's Picks