1

What is the best technique to cache Angular Scope from last browser session to a newly loaded one?

Is that possible?

Including to control the next time to create a cache of the complete scope?

And override the loaded cached scope, when new data is loaded from the back-end?

Improve this question
3
  • Cache $scope or some data inside $scope? Commented Jul 26, 2016 at 17:00
  • Only data inside the Scope and areas inside the Scope. Commented Jul 26, 2016 at 17:03
  • If your objective is sharing data on the scope across your app, you need to use services. "Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app." docs.angularjs.org/guide/services Commented Jul 26, 2016 at 17:12

1 Answer 1

Reset to default
3

This is more related to how to cache data in the browser using javascript.

There are some solutions you can look into for angular specifically:

Angular services can be used to share the scope between routes within the same session. But if you close the browser, you'll need one of local/session storage, cookies, or a server-side solution.

$cookies

Cookies is a straightforward key-value storage. Easy to use for a quick way to save data.

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
    // Retrieving a cookie
    var favoriteCookie = $cookies.get('myFavorite');
    // Setting a cookie
    $cookies.put('myFavorite', 'oatmeal');
}]);

Don't use cookies to store extensive data and limit this to data which should be sent on every request, like a authentication token.

ngStorage

An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage.

bower install ngstorage

Pass $localStorage (or $sessionStorage) by reference to a hook under $scope in plain ol' JavaScript:

$scope.$storage = $localStorage;

And use it like you-already-know:

<body ng-controller="Ctrl">
    <button ng-click="$storage.counter = $storage.counter + 1">{{$storage.counter}}</button>
</body>

Optionally, specify default values using the $default() method:

$scope.$storage = $localStorage.$default({
    counter: 42
});

With this setup, changes will be automatically sync'd between $scope.$storage, $localStorage, and localStorage - even across different browser tabs!

local storage demo

The angular-local-storage module provides multiple ways to store your data. It's feature rich and provides advanced options and customisation.

window.angular.module('demoModule', ['LocalStorageModule'])
    .config(function(localStorageServiceProvider) {
        localStorageServiceProvider.setPrefix('demoPrefix');
        // localStorageServiceProvider.setStorageCookieDomain('example.com');
        // localStorageServiceProvider.setStorageType('sessionStorage');
    })
    .controller('DemoCtrl',
        function($scope, localStorageService) {
            $scope.localStorageDemo = localStorageService.get('localStorageDemo');

            $scope.$watch('localStorageDemo', function(value) {
                localStorageService.set('localStorageDemo', value);
                $scope.localStorageDemoValue = localStorageService.get('localStorageDemo');
            });

            $scope.storageType = 'Local storage';

            if (localStorageService.getStorageType().indexOf('session') >= 0) {
                $scope.storageType = 'Session storage';
            }

            if (!localStorageService.isSupported) {
                $scope.storageType = 'Cookie';
            }

            $scope.$watch(function() {
                return localStorageService.get('localStorageDemo');
            }, function(value) {
                $scope.localStorageDemo = value;
            });

            $scope.clearAll = localStorageService.clearAll;
        }
    );

Additional information

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Don't use cookies. It will create awful behavior problems when you open multiple tabs or try to support browser history actions like the back button or share links. So will local storage. Cookies and local storage are browser wide while you're almost certainly looking for per-tab-session persistent behavior between "pages". Angular is incredible naive about this aspect of design. It's Cold Fusion for millennials.
$rootScope can be used for per-tab-session persistent behavior. Cookies have another potentially big downside: they get sent with every Ajax request. This can make your application slower and less secure.
@MichaelMikowski $rootScope won't even persist a page refresh... local storage and cookies should be used to save data on the client side, like a auth token.
@MichaelMikowski OP specifically mentioned "cache Angular Scope from last browser session to a newly loaded one", there's no doubt about what he was looking for and though a lot of question on AngularJS are about sharing data between pages (controllers), this one isn't.
@EmileBergeron having written web applications for 25 years, I certainly know when to use a cookie, and using it for local storage is a hack that has outlived its useful life. That's what local storage for. Real developers don't even need a framework and extra library to type localStorage.setItem('this', 'that'); and localeStorage.getItem('this'). Your other point is correct; however, I let the comment stand because I have seen numerous Angular apps using Cookies where $rootScope should be used instead and felt it may be useful to some.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.