How can I store an array of chat messages in local storage and how can I retrieve them back in angularjs?

Question

Iam working with chat application.Here I have to store the messages in local storage those entered by individual user as well as group messages also.So I want to use local storage inorder to store the messages so that when I click on the particular user,previous messages sent by that user has to be shown.Iam strucked at writing code for this.How can I implement this code in javascript? Here is my entire code:

var grp = angular.module("grpApp", [])
    .config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('{|');
        $interpolateProvider.endSymbol('|}');
    })
    .directive('scrollBottom', function () {
        return {
            scope: {
                scrollBottom: "="
            },
            link: function (scope, element) {
                scope.$watchCollection('scrollBottom', function (newValue) {
                    if (newValue) {
                        $(element).scrollTop($(element)[0].scrollHeight);
                    }
                });
            }
        }
    })
    .controller("grpCtrl", function ($scope) {
        document.getElementById("name").innerHTML = "Group";
        $scope.friendsList = ["Devi", "Teja", "Sneha", "Srujana"];
        $scope.msgdata = [];
        var d = new Date();
        $scope.time = d.toLocaleString();
        console.log("hlooo" + $scope.time);
        //$scope.uname=JSON.parse($stateParams.uname);
        document.getElementById("clear").addEventListener("keyup", function (event) {
            if (event.keyCode == 13) {
                document.getElementById("submitmsg").click();
            }
        });
        $scope.send = function () {

            document.getElementById("submitmsg").disabled = false;
            var retData = localStorage.getItem("storedData");
            console.log("hiieeee" + retData);
            var retrieveData = JSON.parse(retData);
            console.log("heloooo" + retrieveData);
            $scope.msgdata.push(retrieveData);
            $scope.msgdata.push($scope.message + " " + " " + $scope.time);
            $scope.message = "";
            console.log("hi" + $scope.msgdata);
        }
        $scope.showGrp = function () {
            document.getElementById("name").innerHTML = "Group";
            $scope.msgdata = [];
            var preData = $scope.msgdata;
            localStorage.setItem("storedData", JSON.stringify(preData));



        }
        $scope.frndgrp = function (frnd) {
            document.getElementById("name").innerHTML = frnd;
            $scope.msgdata = [];
            var preData = $scope.msgdata;
            localStorage.setItem("storedData", JSON.stringify(preData));

        }



    });

<div class="container-fluid">
    <div class="row content">
        <div class="col-sm-4 sidenav" id="divlength" style="height:600px;overflow-y:scroll">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search friend.." ng-model="search">
                <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
                </button>
                </span>
            </div>
            <br>
            <button class="btn btn-primary btn-lg" style="width:50%" ng-click="showGrp()">Group</button>
            <br>
            <br>
            <div class="nav nav-pills nav-stacked" ng-repeat="frnd in friendsList|filter:search">
                <a class="btn btn-primary" style="width:50%" ng-bind="frnd" ng-click="frndgrp(frnd)"></a>
                <br>
                <br>
            </div>

            <br>
        </div>
        <div class="col-sm-8" style="height:100px">
            <h4 align="center" id="name" style="font-weight:bold"></h4>
            <footer id="wrapper">
                <div class="chatbox">
                    <div class="chatBox" scroll-bottom="msgdata" id="clearmsg">
                        <div ng-repeat="item in msgdata track by $index"><span class="btn" id="msg" style="background-color:lightgreen;color:black; margin-bottom:5px" ng-bind="item"></span>

                        </div>
                    </div>
                </div>
                <div class="input-group add-on" style="width:100%;">
                    <input class="form-control usermsg chatTextField" placeholder="Type a message" name="srch-term" type="text" ng-model="message" id="clear" required>
                    <div class="input-group-btn">
                        <button class="btn btn-success" type="submit" style="float:right" id="submitmsg" ng-click="send()" ng-disabled="!message"><span class="glyphicon glyphicon-send"></span></button>
                    </div>
                </div>
            </footer>
        </div>

    </div>
</div>