Question

我正在使用聊天应用程序。我必须将消息存储在由个人用户输入的本地存储中以及组消息中。所以我想使用本地存储来存储消息，这样当我点击时特定用户，必须显示该用户发送的先前消息。我在为此编写代码时遇到了麻烦。如何在javascript中实现此代码？这是我的整个代码：

＆＃13;

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));

        }



    });

＆＃13;

<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>

＆＃13;

Answer 1

我假设您已经知道本地存储仅接受字符串。因此，您可以简单地设置为本地存储项目，其字符串格式为空JSON，就像这样

localStorage.setItem("chat", JSON.stringify([]));

然后获取JSON并将其存储在这样的变量中

var chatHistory = JSON.parse(localStorage.getItem("chat"));

最后将新消息推送到chatHistory变量，并将本地存储项chat重置为新的chatHistory。

 var message = {
    name: "John Doe",
    text: "Your message text...",
    createdAt: new Date()
  };
  chatHistory.push(message);
  localStorage.setItem("chat", JSON.stringify(chatHistory));

如何在本地存储中存储一组聊天消息，如何在angularjs中检索它们？

1 个答案: