CODEWITHSUNDEEP
javascriptangularjs
AHJ
AHJ

Reputation: 163

How to Cache Angular scope

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?

Upvotes: 1

Views: 2653

Answers (1)

Emile Bergeron
Emile Bergeron

Reputation: 17430

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

Upvotes: 3

Related Questions