CODEWITHSUNDEEP
javascriptangularjs
Shivam
Shivam

Reputation: 41

Angular Js: get $localStorage value in view page

I am developing a small app using Angular Js, and I am storing a value in $localStorage inside a Controller. Now I want to use that value in view page(.html page).

Can someone please suggest how can I do that?

Upvotes: 2

Views: 4448

Answers (2)

Ankit
Ankit

Reputation: 6143

Local Storage

Set and get data with localStorage in JavaScript :

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

Usage in AngularJS

I am assuming you are referring to ngStorage module

use ngStorage js file like this (make sure you load it after angularjs is loaded, notice the order of script tags) :

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

Now, inject $localStorage service in your controller

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

Now display this in your view like this

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

Upvotes: 2

Atlas
Atlas

Reputation: 241

In your controller, which is connected to your html-view Template, Inject $localStorage.

And then you can use all functionality and values from $localStorage in your view

For exaple ;

$scope.testValue = $localStorage.nameOfFunction

And in your view you can show it with interpolation like

{{ testValue }}

Upvotes: 0

Related Questions