retain the current state of a webgrid

See more:

jQuery

MVC4

I have a webgrid in my view as follows:

      @grid.GetHtml(
     tableStyle: "webgrid",
     headerStyle: "head",
     alternatingRowStyle: "alt",
     columns: grid.Columns(
     grid.Column("PersonId", "Id"),
     grid.Column("Name", header: string.Format("Name" + " {0}", grid.SortColumn == "Name" ? grid.SortDirection == SortDirection.Ascending ? "▼" : "▲" : ""), canSort: true, style: "px20"),
     grid.Column("PersonContactNo","Contact No")
)

for a certain user i have hidden the 3rd column using javascript like below:

     $(document).ready(function () {
    hideColumnColorRow(3); //hide Contact No. column
});

(function ($) {
    hideColumnColorRow = function (column) {
        $('td:nth-child(' + column + '),th:nth-child( ' + column + ')').hide();
    };
})(jQuery);

the code works fine while debugging but whenever i try to click on the "Name" hyperlink to sort the list, the hidden column reappears...how do i get the webgrid to retain its state???
pleas help me on this....