ASP.NET Programming & Solutions: Saving object/array object in LocalStorage in ASP.NET Bootstrap

Hi Guys,

I was checking out a small code in Javascript which adds a javascript class object/JSON object in a

localstorage. The localstorage saves the array object and displays it in the bootstrap table/grid.

You need to have knowledge of JSON and object oriented programming in Javascript. However comments

have been added which can help you out.

Following is the HTML and Javascript content

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Enter Exam Details</title>

    
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-

combined.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
      <h1>Add your past exam details</h1>

      <form method="post" class="form-horizontal">
        <fieldset>
          <legend>Add Exams</legend>
          <div class="control-group">
            <label class="control-label" for="type">Type of enquiry</label>
            <div class="controls">
              <select name="type" id="type">
                <option value="">Please select</option>
                <option value="general">General</option>
                <option value="sales">Sales</option>
                <option value="support">Support</option>
              </select>
            </div>
          </div>


          <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
              <input class="input-xlarge" type="text" name="name" id="name" value=""

maxlength="50">
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
              <input class="input-xlarge" type="text" name="email" id="email" value=""

maxlength="150">
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="message">Message</label>
            <div class="controls">
              <textarea class="input-xlarge" name="message" id="message"></textarea>
            </div>
          </div>

          <div class="control-group">
            <div class="controls">
              <label class="checkbox">
                <input name="subscribe" id="subscribe" type="checkbox">
                Subscribe to our newsletter
              </label>
            </div>
          </div>
        </fieldset>

        <div class="form-actions">
          <input type="button" name="submit" id="submit" value="Send" class="btn btn-primary">
        </div>


        <div id="grid">
            <table id="tgrid" class="table table-hover">
                <tr id="thead">
                    <th>Email</th>
                    <th>Message</th>
                    <th>Name</th>
                    <th>Type</th>
                </tr>

            </table>
        </div>

      </form>
    </div>


    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function () {
    //This has been commented this clears the localstorage.
    //localStorage.clear();

    //Create a javascript class with name "items"
    var items=function(){
        type:"";
        name:"";
        email:"";
        message:"";
    };

    //Create an array which can store object of the class
    var emp=new Array();

       /*
       * check if the browser supports local storage
       */
      if (localStorage) {

    function load()
        {
            var data=new Array();
            data=JSON.parse(localStorage["data"]);
            console.log(data.length);
            for(i=0;i<data.length;i++)
            {
                //console.log('Email of '+(i+1)+' '+data[i].email);
                var html='<tr><td>'+data[i].email+'</td><td>'+data[i].message

+'</td><td>'+data[i].name+'</td><td>'+data[i].type+'</td></tr>';
                $('#tgrid:last-child').append(html);
            }
        }

        function added()
        {
            var data=new Array();
            data=JSON.parse(localStorage["data"]);
            i=data.length-1;
            var html='<tr><td>'+data[i].email+'</td><td>'+data[i].message

+'</td><td>'+data[i].name+'</td><td>'+data[i].type+'</td></tr>';
            $('#tgrid:last-child').append(html);
        }

        function clear()
        {
            $("#type").val("");
            $("#name").val("");
            $("#email").val("");
            $("#message").val("");
        }

        //Loads the initial function
        load();

              $('#submit').click(function(){

            //Checks if the data in the localstorage exists if yes stores the initial

//data in the array before saving so that the push method can save the new object at the top.
            emp=JSON.parse(localStorage["data"]);

            var obj=new items();
            obj.type=$("#type").val();

            obj.name=$("#name").val();

            obj.email=$("#email").val();

            obj.message=$("#message").val();


            //Adds the object in the array emp
            emp.push(obj);

            //After adding the object in the array store the array in localStorage
            localStorage["data"]=JSON.stringify(emp);

            //Call the add method
            added();
            //clear form after saving it.
            clear();
              });

      }//end of if(localstorage)
    });
</script>
</body>
</html>

ASP.NET Programming & Solutions

Amazon Ad

Monday, 16 February 2015

Saving object/array object in LocalStorage in ASP.NET Bootstrap

No comments:

Post a Comment

How to implement Captcha v3 in ASP.NET