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

【问题标题】：Angular Js: get $localStorage value in view pageAngular Js：在视图页面中获取 $localStorage 值
【发布时间】：2017-08-28 07:29:17
【问题描述】：

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

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

【问题讨论】：

将$localStorage 变量分配给$scope 变量并在您的视图中使用它。
How to get the Local Storage data into the view file Using Angular js的可能重复

标签： javascript angularjs

【解决方案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>

【讨论】：

【解决方案2】：

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

然后你可以在你的视图中使用来自$localStorage的所有功能和值

例如;

$scope.testValue = $localStorage.nameOfFunction

在你看来，你可以用插值来展示它

{{ testValue }}

【讨论】：