Angular Js：在视图页面中获取$ localStorage值

Question

我正在使用Angular Js开发一个小应用程序，我将一个值存储在Controller中的$localStorage中。现在我想在视图页面（.html页面）中使用该值。

有人可以建议我该怎么做？

Answer 1

本地存储

使用 JavaScript 中的 localStorage设置并获取数据：

localStorage.setItem("storageKey", "storedValueGoesHere"); //save into local storage
var test = localStorage.getItem("storageKey"); //get value from local storage
console.log(test); //Logs "storedValueGoesHere"

AngularJS中的用法

我假设您指的是ngStorage模块

像这样使用ngStorage js文件（确保在加载 angularjs后加载，注意script标记的顺序）：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>

现在，在您的控制器中注入$localStorage服务

angular.module('app', ['ngStorage']).controller('Ctrl', function ($scope, $localStorage) {  
                $scope.modelToBeDisaplyedinView = '';
                $scope.Save = function () {
                $localStorage.LocalMessage = "save some text here !";
            }
            $scope.Get = function () {
                $scope.modelToBeDisaplyedinView = $localStorage.LocalMessage ;
            });  

<强> HTML

现在在您的视图中显示此内容

<div ng-app="app" ng-controller="Ctrl">
        <input type="button" value="Save" ng-click="Save()" />
        <input type="button" value="Get" ng-click="Get()" />
<p ng-bind="modelToBeDisaplyedinView "></p>

<p> {{modelToBeDisaplyedinView }}</p>
    </div>

Answer 2

在您的控制器中，该控制器已连接到html-view Template，Inject $localStorage。

然后，您可以在视图中使用$localStorage中的所有功能和值

exaple;

$scope.testValue = $localStorage.nameOfFunction 

在您的视图中，您可以使用插值显示

{{ testValue }}