LocalStorage in AngularJS

Form Design code for User Table

<div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">
    <button class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;
margin-top: 7px">
        <span class="glyphicon glyphicon-user"></span>Create New User
    </button>
    <label id="msgLab" style="color: #008080; font-size: large"></label>
    <br /><%--
    <label >
Search:</label>--%>
    <br /><%--
    <input type="text" ng-model="search" ng-keydown="clear()" style="margin-left: 980px;" placeholder="Search">--%>
        <hr />
        <div class="manish">
            <h3>
Users</h3>
            <hr />
            <form class="navbar-form" role="search">
                <div class="input-group add-on">
                    <input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term" id="search" class="form-control" type="text">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <i class="glyphicon glyphicon-search"></i> Search
                            </button>
                        </div>
                    </div>
                </form>
                <pagination style="margin-left: 850px;" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" boundary-links="true" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
                <br />
[
                <a href="" ng-click="Btn=''">Reset</a> ]

                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr class="danger"><%--
                            <th>
ID
</th>--%>
                            <th>
                                <a href="" ng-click="Btn = 'name'; reverse=true"></a>
                                <a href="" ng-click="Btn = '-fName'; reverse=true">First Name</a>
                            </th>
                            <th class="text-center">
                                <a href="" ng-click="Btn = 'name'; reverse=true"></a>
                                <a href="" ng-click="Btn = '-lName'; reverse=true">Last Name</a>
                            </th>
                            <th class="text-center" colspan="2">
                                <a href="" ng-click="Btn = 'name'; reverse=true"></a>
                                <a href="" ng-click="Btn = '-email'; reverse=true">Email Id</a>
                            </th>
                            <th class="text-center" colspan="2">
                                <a href="" ng-click="Btn = 'num'; reverse=true"></a>
                                <a href="" ng-click="Btn = '-number'; reverse=true">Phone Number</a>
                            </th>
                            <th class="text-center" colspan="2" >
Image
</th>
                            <th class="text-center">
Action
</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="color: #7A2900" ng-repeat="user in usersa | filter:search | orderBy:Btn:reverse "><%--
                            <td class="danger" class="text-center">
{{user.id }}
</td>--%>
                            <td>
{{user.fName }}
</td>
                            <td class="text-center">
{{user.lName }}
</td>
                            <td class="text-center" colspan="2">
{{user.email }}
</td>
                            <td class="text-center" colspan="2">
{{user.number }}
</td>
                            <td class="text-center" colspan="2">
                                <img ng-src="upload/{{user.hid}}" height="100px" width="100px" />
                            </td>
                            <td class="text-center">
                                <a href="#" class="btn btn-primary" ng-click="edit(user.id)">
                                    <span class="glyphicon glyphicon-pencil"></span>Edit
                                </a> |
                                <a href="#" class="btn btn-danger" ng-click="del(user.id)">
                                    <span
class="glyphicon glyphicon-remove"></span>Delete
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p ng-hide="true">
total Items: {{totalItems}}
                    <br />
Items per page: {{itemsPerPage}}
                    <br />
Current Page: {{currentPage}}

                </p>
            </div>
        </div>

Code For User Form Design

<div class="form-horizontal" name="myForm" ng-show="edit2" ng-hide="true">
    <hr />
    <h3 ng-show="edit1" ng-hide="false">
Create New User:</h3>
    <h3 ng-show="edit11" ng-hide="false"">
Edit User:</h3>
    <input type="hidden" ng-model="newuser.id" />
    <div class="form-group" ng-show="edit5" ng-hide="false">
        <label class="col-sm-2 control-label">
First Name:</label>
        <div class="col-sm-10">
            <input type="text" id="fname" name="fName" ng-model="newuser.fName" placeholder="First Name" />
        </div>
    </div>
    <div class="form-group" ng-show="edit5" ng-hide="false">
        <label class="col-sm-2 control-label">
Last Name:</label>
        <div class="col-sm-10">
            <input type="text" id="lname" name="lname" ng-model="newuser.lName" placeholder="Last Name" />
        </div>
    </div>
    <div class="form-group" ng-show="edit5" ng-hide="false">
        <label class="col-sm-2 control-label">
Email Id:</label>
        <div class="col-sm-10">
            <input type="text" id="email" name="email" ng-model="newuser.email" placeholder="Email ID" />
        </div>
    </div>
    <div class="form-group" ng-show="edit5" ng-hide="false">
        <label class="col-sm-2 control-label">
Phone No:</label>
        <div class="col-sm-10">
            <input type="text" id="numb" class="num" name="num" ng-model="newuser.number" placeholder="Enter Phone NO" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">
Birth Date:</label>
        <div class="col-sm-2">
            <p class="input-group">
                <input type="text" name="bday" id="bday" class="form-control" ng-focus="open($event)" ng-blur="out()" datepicker-popup="{{format}}" ng-model="newuser.bdate" is-open="opened" readonly="readonly" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
            </p>
        </div>
    </div>
    <div class="form-group" ng-show="edit7" ng-hide="false">
        <label class="col-sm-2 control-label">
Image:</label>
        <div class="col-sm-15">
            <input type="file" file-model="myFile" id="myFile" class="btn btn-primary"/>
            <button ng-click="uploadFile()" class="btn btn-primary">
                <span class="glyphicon glyphicon-upload"> Upload File</span>
            </button>
            <br />
        </div>
    </div>
    <div class="col-sm-10" ng-show="remove" ng-hide="true" style="margin-left: 170px" >
        <img id="getimg" height="100px" width="100px"/>
        <button class="btn btn-danger" ng-click="removefile()" ng-show="remove1" ng-hide="false">
            <span
class="glyphicon glyphicon-remove"></span>Remove
        </button>
    </div>
    <div class="form-group">
        <input type="text" id="hid" name="hid" ng-model="newuser.hid" ng-hide="true"/>
    </div>
    <hr />
    <button class="btn btn-primary" ng-click="saveUser()">
        <span class="glyphicon glyphicon-save"></span>Save Data

    </button>
    <button id="cbtn" class="btn btn-danger" ng-click="cancel()">
        <span class="glyphicon glyphicon-cancel"></span>Cancel

    </button>
</div>

Save Button Code

$scope.saveUser = function() {
    var a = $("#hid").val();
    $.ajax({
        type: "POST",
        url: "localstorage2.aspx/SaveUser",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            id: $scope.id,
            fName: $scope.fName,
            lName: $scope.lName,
            email: $scope.email,
            number: $scope.number,
            hid: $scope.hid = a
        }),
        success: function(data) {
            strErrorMsg = "";
            notEmpty(document.getElementById('fname'), '-Enter your first name.');
            notEmpty(document.getElementById('lname'), '-Enter your last name.');
            notEmpty(document.getElementById('email'), '-Enter your Email ID.');
            notEmpty(document.getElementById('numb'), '-Enter your Phone NO.');
            notEmpty(document.getElementById('bday'), '-Enter your birth date.');
            validateEmail(document.getElementById('email'), '-Enter Valid Email');
            ValidMno(document.getElementById('numb'), '-Enter Valid Phone No');

            if (strErrorMsg == '') {
                var data = localStorage.getItem('iid');
                studa = JSON.parse(data);
                if ($scope.id == 0) {
                    $scope.id = aid++;
                    $scope.users.push({
                        id: $scope.id,
                        fName: $scope.fName,
                        lName: $scope.lName,
                        email: $scope.email,
                        number: $scope.number,
                        hid: $scope.hid = a
                    });
                    $("#msgLab").text("Record Save successfully");
                    localStorage.setItem('iid', angular.toJson($scope.id));
                } else {
                    for (i in $scope.users) {
                        if ($scope.users[i].id == $scope.id) {
                            $scope.users[i] = ({
                                id: $scope.id,
                                fName: $scope.fName,
                                lName: $scope.lName,
                                email: $scope.email,
                                number: $scope.number,
                                hid: $scope.hid
                            });
                            $scope.users[i].hid = a;
                            $("#msgLab").text("Record Edit successfully");
                        }
                    }
                }
                localStorage.setItem('stu', angular.toJson($scope.users));
                $scope.totalItems = $scope.users.length;
                $scope.itemsPerPage = 3
                $scope.currentPage = 1;

                $scope.maxSize = 5;
                $scope.bigTotalItems = 175;
                $scope.bigCurrentPage = 1;

                $scope.pageCount = function() {
                    return Math.ceil($scope.Friends.length / $scope.itemsPerPage);
                };
                $scope.edit2 = false;
                $scope.edit3 = true;
                $scope.$apply();
            }
            $window.alert(' Errors \n' + strErrorMsg);
        },
        error: function() {
            alert("error");
        }

    });
};

Cancel button Code

$scope.cancel = function ()
{
   $scope.edit2 = false;
   $scope.edit3 = true;
};

Delete button code

$scope.del = function(id)
{
    var deleteUser = $window.confirm('Are you sure you want to Record delete?');
    if (deleteUser) {
        $window.alert('One Record Delete');
        for (i in $scope.users) {
            if ($scope.users[i].id == id)
            {
                if ($scope.users[i].hid != "noimage.jpg")
                {
                    $.ajax({
                        type: "POST",
                        url: "localstorage2.aspx/DeleteImage",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify({
                            hid: $scope.users[i].hid
                        }),
                        success: function(data) {
                            alert("succc");
                        },
                        error: function() {
                            //alert("error");
                        }
                    });
                }
                $scope.users.splice(i, 1);
                $scope.newuser = {};
                $("#msgLab").text("Record Delete successfully");
                localStorage.setItem('stu', angular.toJson($scope.users));
                //localStorage.setItem('iid', angular.toJson($scope.newuser.id));
            }
        }
    }
};

Edit Button Code

$scope.edit = function(id) {
    for (i in $scope.users) {
        if ($scope.users[i].id == id) {
            if ($scope.users[i].hid == "noimage.jpg") {
                $scope.remove1 = false;
            } else {
                $scope.remove1 = true;
            }
            ({
                id: $scope.id,
                fName: $scope.fName,
                lName: $scope.lName,
                email: $scope.email,
                number: $scope.number,
                hid: $scope.hid
            }) = angular.copy($scope.users[i]);
            $("#getimg").attr('src', 'upload/' + $scope.users[i].hid);
            $scope.edit2 = true;
            $scope.edit3 = false;
            $scope.edit5 = true;
            $scope.edit1 = false;
            $scope.edit11 = true;
            $(myFile).val('');
            $("#msgLab").text("");
            $scope.remove = true;
        }
    }

};

Remove Image at Edit time remove code

$scope.removefile = function () {
var Removeimg = $window.confirm('Are you sure you want to Remove The Image?');
if (Removeimg) {
$("#hid").val("noimage.jpg");
$("#getimg").attr('src', 'upload/noimage.jpg');
if ($("#hid").val() == "noimage.jpg") {
$scope.remove1 = false;
} else {
$scope.remove1 = true;
}
}
};

Create a New User Code

$scope.editUser = function()
{
    $scope.fName = "";
    $scope.lName = "";
    $scope.email = "";
    $scope.number = "";
    $scope.edit1 = true;
    $scope.edit11 = false;
    $scope.edit2 = true;
    $scope.edit3 = false;
    $scope.edit5 = true;
    $scope.edit6 = true;
    $(myFile).val('');
    $("#hid").val("noimage.jpg");
    $("#msgLab").text("");
    $scope.remove = false;
    $scope.id = 0;
};

File Upload code

$scope.uploadFile = function ()
{
    var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
    if ($(myFile).val() == "") {
    alert("Select a file");
}
    else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {
    alert("Select a image file");
    $(myFile).val('');
    $("#hid").val("noimage.jpg");
}
else
{
    var file = $scope.myFile;
    var uploadUrl = "Image.aspx";
    fileUpload.uploadFileToUrl(file, uploadUrl);
    $scope.myFile = "";
    $scope.remove = true;
    $scope.remove1 = true;
    var reader = new FileReader();
    reader.onload = function (e) {
    scope.image = e.target.result;
    scope.$apply();
}
}
    elem.on('change', function () {
    reader.readAsDataURL(elem[0].files[0]);
});
};
    localstorage2.aspx Code For Delete a File From Folder
    <Services.WebMethod()>
    Public Shared Function DeleteImage(ByVal hid As String) As String
    If System.IO.File.Exists("D:\manish\Localstor\upload\" & hid) Then
    System.IO.File.Delete("D:\manish\Localstor\upload\" & hid)
Else
End If
End Function

Image.aspx Code For Upload Fie

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Clear()
    Dim fileid As String = System.Guid.NewGuid.ToString()
    ' Dim fname As String = Context.Request.Files.Get(0).FileName()
    Context.Request.Files.Get(0).SaveAs("D:\manish\Localstor\upload\" & fileid & ".jpg")
    Response.Write(fileid)
    Response.End()
End Sub