Notorious Penguin Magicians


    1.0.11 • Public • Published

    AngulsrJS LocalStorage CountDown Timer

    A countdown timer that write the data into the localStorage of the browser. It's being used incase of: -You want to refresh the page and continue from where you left off. -You want to get notified when the time is up ( Event ) and trigger something.

    $ npm install --save angularjs-localstorage-timer 

    Usage example

    A full-featured working example can be found under the node_modules/angularjs-localstorage-timer/src/index.html directory.

    <!-- In your HTML file ( index.html ) -->
    <script src="node_modules/dist/localstorage-countdown-timer.min.js"></script>
    // Create your app with 'youtube-embed' dependency
    var myApp = angular.module('myApp', ['localstorage-countdown-timer'])
    // Inside your controller...
    .controller('GenericCtrl', ['$scope', 'CountDownTimer', function ($scope, CountDownTimer) {
      // Create new Timer object
      $scope.AppTimer = new CountDownTimer({
        id:       "CountDownTimer",
        counter:  60,
        interval: 1000


    .controller('GenericCtrl', ['$rootScope', '$scope', 'CountDownTimer', function ($rootScope, $scope, CountDownTimer) {
        // Inside your controller...
        $scope.AppTimer = new CountDownTimer({ ... parameters from above ... });
        $scope.$on('CountDownTimerChangeEvent', function () {
            // Event that is triggered on every $interval ( 1000 - every 1s )
            // ... do code here ...
        $scope.$on('CountDownTimerEndEvent', function () {
            // Event that is triggered when the timer reaches zero (0)
            // ... do code here ...

    Timer Functions


    Stop the timer

    <button ng-click="AppTimer.start()"> Start </button>


    Starting/Resuming the timer.

    <button ng-click="AppTimer.start()"> Start </button>


    Restart the timer with the values given when creating the timer. Timer won't start running, need to use start()

    <button ng-click="AppTimer.restart()"> Restart </button>


    Update one of the parameters given to the new CountDownTimer()'s properties ( id, counter etc .. ) The update action will save the values into LocalStorage as well, but won't restart the timer. Timer won't start running, need to use start()

    <button ng-click="AppTimer.update('counter', 120)"> Update </button>

    Timer Information


    Will return the exiting counter value

    $scope.counter = $scope.AppTimer.getCounter();


    Will return the "last updated" value that the timer has stored. The value is a Date() object.

    $scope.lastUpdate = $scope.AppTimer.getLastUpdate();


    Return as JSON all the possible information stored in LocalStorage. Meaning the counter, last_updated, the timer's id etc ..

    $scope.counter = $scope.AppTimer.getCounter();


    Check if the time requested has passed since the .getLastUpdate() value Returns true / false

    if ( $scope.AppTimer.isTimePassed() ) {

    Timer LocalStorage Actions


    So the reload() isn't really there ... we need to write it on our own in our controller as: If $ - is already found in LocalStorage - the timer will be reloaded with the last counter. But if the id isn't found, it will create a new timer.

        $scope.reload = function() {
            $scope.AppTimer = new CountDownTimer($;


    Removing the timer entirly from LocalStorage. Remember that in order to continue from where we left off - the timer is always there ...



    npm i angularjs-localstorage-timer

    DownloadsWeekly Downloads






    Last publish


    • arlevi