JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div ng-app='habr-demo-app'>
    e-mail 1: <input type='email' name='email1' habr-remember-in-cookie='cookie-name-for-email1'/><br/>
    e-mail 2: <input type='email' name='email2' habr-remember-in-cookie='cookie-name-for-email2'/><br/>
</div>

JavaScript

// 1. Оборачиваем код в вызов анонимной функции, чтобы не захламлять глобальное пространство имен
// (так рекомендуют в Angular Style Guide https://github.com/johnpapa/angular-styleguide)
(function() {

    // 2. Обычное объявление модуля
    var app = angular.module('habr-demo-app', []);

    // 3. Объявление нашей директивы
    app.directive('habrRememberInCookie', habrRememberInCookie);
    
    function habrRememberInCookie() {

        function link(scope, element, attrs) {

            // 5. Только в пустой элемент будем восстанавливать сохраненное значение.
            if(!element.val()) {

                // 6. Используем значение атрибута в качестве имени куки
                var savedValue = $.cookie(attrs.habrRememberInCookie);

                element.val(savedValue);
            }
            
            // 7. При каждом изменении значения записываем его в куки
            element.on('change', function(event) {
                
                var newValue = element.val();
                
                $.cookie(attrs.habrRememberInCookie, newValue, {expires: 360});

            });
        }
        
        return {
            restrict: 'A', // 4. Разрешаем использовать нашу директиву только как атрибут
            link: link
        };
    }

})();