Usage of ngStorage(angularjs) for language option

Question

I have this HTML

<button class="btn btn-info" ng-click="setLanguage('en')">English</button>
<button class="btn btn-info" ng-click="setLanguage('de')">Danish</button>
<p>{{name[language]}}</p>

and javascript

$scope.language='en';  //initial default value
$scope.setLanguage = function(language) {
    $scope.language = language;    
   }

i am binding language to button for 2 languages.based on the language selected, the content will be shown. how to store en or de to localstorage. if i refresh or change the page also, the set language should be same. how to do it. can anyone help me Here is the plunker http://plnkr.co/edit/zHMvBWCKevKgGeBerhhE?p=preview

are you looking for `localStorage.setItem(key, value)` and `localStorage.getItem(key)`? I don't know why you need ngStorage if you just want to use localStorage. — AntiHeadshot, Jan 28 '16 at 10:33
No, but the same thing. i have used ngStorage. https://github.com/gsklee/ngStorage , but i don't know , how to use it. If you can tell me in your own way. which you told above, that is also ok — Thilak Raj, Jan 28 '16 at 10:35

Charlie · Answer 1 · 2016-01-28T11:00:35.310

1

ng-storage is amazingly simple.

Inject ngStorage in to your main module and $localStorage to your controller.

$scope.setLanguage = function(language) {
    $scope.language = language;    

    $localStorage.language = language;

   }

If you need to persist data across refreshes, think of using ng-cookies.

Inject ngCookies into your main module. Also insert $cookies into your controller.

Then you can use $cookies.put and $cookies.get for storing and retrieving data.

$scope.setLanguage = function(language) {
    $scope.language = language;    

    $cookies.put('language', language);

   }

Also note that you should use the cookie expiry date to set the TTL.

edited Jan 28 '16 at 11:00

answered Jan 28 '16 at 10:36

Charlie

22,886
11
59
90

I have tried it already, but it is not working, if i refresh, it will again move to en. is there any way to check in chrome, whether it is stored in localstorage – Thilak Raj Jan 28 '16 at 10:46
Probably you should use $cookies – Charlie Jan 28 '16 at 10:50
Its part of angular js. Comes as an additional module. ( – Charlie Jan 28 '16 at 11:01
Plunker here http://plnkr.co/edit/zHMvBWCKevKgGeBerhhE?p=preview if i include $cookies in controller, i will get some error. see the plunker above – Thilak Raj Jan 28 '16 at 11:25
Your problem is the disparity of versions of angular and ng-cookies. If you use angular 1.2.x then you should use an-cookies 1.2.x too. – Charlie Jan 28 '16 at 15:15
If you don't mind, can you show it, how to add http://plnkr.co/edit/uOuTQEquJ0rrNJQagRba?p=preview $cookies.get('language', language); – Thilak Raj Jan 29 '16 at 04:23
1

When you say `console.log($cookies.get('language'));` what you see is what function returns. Nothing else. – Charlie Jan 29 '16 at 05:13
Anyway, `$cookies.ge`t and `$cookies.put` are very simple methods and works just fine in your plunker. I don't think there is anyway I can help you beyond this point. – Charlie Jan 29 '16 at 05:14
So, this is not any more a problem of local storage and cookies. This is a problem of ,sharing data between controllers. – Charlie Jan 29 '16 at 05:19
even in plunker, the cookie data gonna lost, if i click refresh http://plnkr.co/edit/bLsFhA8BF5Hg9whCBnAU?p=preview – Thilak Raj Jan 29 '16 at 05:47
That is because of the handling of cookies by plunker. ng-cookies is a well tested module and is working without a problem. – Charlie Jan 29 '16 at 05:49
See this plunker, i have used local storage. it works well if i click refresh also http://plnkr.co/edit/nrRNWggwZVpgEk7wwzzi?p=preview – Thilak Raj Jan 29 '16 at 05:53
Thats why I said your problem is not with localstorage or cookies. It is about sharing data. – Charlie Jan 29 '16 at 06:03

Shaishab Roy · Answer 2 · 2016-01-28T10:41:37.007

1

You ca use:

window.localStorage['storageVariableName'] = language;

and if you want to save as jason format use

window.localStorage['storageVariableName'] = angular.tojson(language);

and access data

$scope.language = window.localStorage['storageVariableName'];

edited Jan 28 '16 at 10:41

answered Jan 28 '16 at 10:36

Shaishab Roy

16,335
7
50
68

Hristo Enev · Accepted Answer · 2016-01-28T10:55:40.003

1

// Getter
if ($window.localStorage.language) {
    $scope.language = $window.localStorage.language;
} else {
    $scope.language = 'en';
}


// Setter
$scope.setLanguage = function(language) {
    $scope.language = language;
    $window.localStorage.language = language;
}

To check your resource variables like cookies, local storage, etc. Under chrome developer tools (access with F12) go to Resources tab.

edited Jan 28 '16 at 10:55

answered Jan 28 '16 at 10:36

Hristo Enev

2,421
18
29

Does it needs ngStorage or without that – Thilak Raj Jan 28 '16 at 10:40
Nope. It works just fine without it :) You just need to inject `$window`. But you can also use `window` instead. – Hristo Enev Jan 28 '16 at 10:53
Thanks for the info, but it didn't work. i have checked local storage in resources, it is en after refreshing the page. it was not changed – Thilak Raj Jan 28 '16 at 10:58
I have used same thing as above in my project as in plunker http://plnkr.co/edit/nrRNWggwZVpgEk7wwzzi?p=preview. but in plunker it is working,but not in my project. can you tell me why – Thilak Raj Jan 28 '16 at 11:38
If it is a different controller, is that leads to problem? I mean button is in different controller and view, and content in different view and controller – Thilak Raj Jan 28 '16 at 11:41
It doesn't matter. Controllers use the same local storage. – Hristo Enev Jan 28 '16 at 12:06
Oh actually it does when you try to use the same scope variable in the both controller. They don't share the same scope. So `$scope.language` will be different for both. And won't update upon clicking the button if the display is in another controller and view. To share data between controllers you need to use either `services` or `$rootScope` events. – Hristo Enev Jan 28 '16 at 12:09
Check this answer for sharing data between controllers with services - [Share data between AngularJS controllers](http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers) – Hristo Enev Jan 28 '16 at 12:11
If you don't mind, can you show me in code. how to share for my code. because i am not getting how to do it – Thilak Raj Jan 28 '16 at 12:14
Check the article I just provided you in my previous comment. It is already answered :) Hope that helps you – Hristo Enev Jan 28 '16 at 12:16
i saw it, but i am not getting how to use it with local storage, where to use local storage – Thilak Raj Jan 28 '16 at 12:20
The same way. The only difference is that you set and get your language to and from your factory instead of your `$scope` variable `language`. You should really read some documentation first to understand the basic concepts. – Hristo Enev Jan 28 '16 at 12:58

Usage of ngStorage(angularjs) for language option

3 Answers3