How to remember data?

Question

JavaScript

Hello, help me figure out the hash. There is a page for adding a product:

<form ng-submit="addProduct()" ng-model="ap" >
      <h4 >Add Product</h4>
      <div class="form-group">
        <label>ID:</label><br>
        <input class="form-control" type="text" ng-model="ap.id" placeholder="Кодова назва продукту" required>
      </div>
      
       <div class="form-group">
        <label >Назва:</label><br>
        <input class="form-control" type="text" ng-model="ap.name" placeholder="Назва продукту" required>
      </div>
      
      <div class="form-group">
        <label>Опис:</label><br>
        <input class="form-control" type="text" ng-model="ap.description" placeholder="Опис продукту" required>
      </div>
      
      <div class="form-group">
        <label>Країна</label><br>
        <input  class="form-control"type="text" ng-model="ap.country" placeholder="Країна виробник" required>
      </div>

       <div class="form-group">
        <label>Калорії</label><br>
        <input  class="form-control"type="number" ng-model="ap.calories" placeholder="к-ть Калорій" required>
      </div>

       <div class="form-group">
        <label>Ціна</label><br>
        <input  class="form-control"type="number" ng-model="ap.price" placeholder="Ціна" required>
      </div>

       <div class="form-group">
        <label>Термін</label><br>
        <input  class="form-control" type="text" ng-model="ap.termin" placeholder="к-ть днів зберігання" required>
      </div>

       <div class="form-group">
        <label>Дата</label><br>
        <input  class="form-control" type="date" ng-model="ap.dataWugot" placeholder="Дата виготовлення" required>
      </div>
    <p><input class="btn btn-primary" type="submit"></p>
    </form>

And controller :

productApp.controller("addProducts", function ($scope, Products) {
     $scope.currentProduct = null;
     $scope.products = Products;
     $scope.setProduct = function (code) {
       $scope.currentAProduct = $scope.products.detail[code];
     };
     
     $scope.addProduct = function() {
       $scope.products.detail[$scope.ap.id] = $scope.ap;
       delete($scope.ap);
     };
  });

productApp.factory("Products", function () {
    var Products = {};
    Products.detail = {
        "milk": {
            "name": "Молоко", 
            "description": "Чудове молоко 2,5% жирності",
            "country": "Україна",
            "calories": "220 Ккал",
            "price": 12,
            "termin": 3,
            "dataWugot": "05.28.2015"
        },
        "cheese": {
            "name": "Сир", 
            "description": "Кращий твердий сир поділля",
            "country": "Казахстан",
            "calories": "300 Ккал",
            "price": 50,
            "termin": 14,
            "dataWugot": "04.23.2015"

        },
        "sour_cream": {
            "name": "Сметана", 
            "description": "Наша сметана 30%-вої жирності",
            "country": "Україна",
            "calories": "320 Ккал",
            "price": 20,
            "termin": 7,
            "dataWugot": "05.24.2015"
        },

        "beer": {
            "name": "Пиво", 
            "description": "Чернігівське світле пиво",
            "country": "Білорусь",
            "calories": "50 Ккал",
            "price": 12,
            "termin": 50,
            "dataWugot": "04.25.2015"
        },

        "whater": {
              "name": "Вода", 
              "description": "Солодка вода Караван",
              "country": "Україна",
              "calories": "90 Ккал",
              "price": 10,
              "termin": 90,
              "dataWugot": "03.11.2015"
        },

        "chocolate": {
            "name": "Шоколад", 
            "description": "Шоколад Milka",
            "country": "Білорусь",
            "calories": "250 Ккал",
            "price": 25,
            "termin": 21,
            "dataWugot": "04.17.2015"
        },

        "cherry": {
            "name": "Вишня", 
            "description": "Натуральна Казахстанська вишня вишня",
            "country": "Казахстан",
            "calories": "40 Ккал",
            "price": 90,
            "termin": 7,
            "dataWugot": "01.12.2015"
        }
    };
    return Products; 
});

The form works fine and the product is added, but when the page is reloaded, the added product disappears. How to solve it? Oh yes, the database can not be used.
https://jsfiddle.net/6wup15fo/

Answer 1

localStorage - write a service and put $watch on Products.detail where you update the data in localStorage when it changes. When restarting, let the service return you either localStorage data, or if they are not there, then a pre-prepared object.
Firebase (database of course, but still take a look, it might work.)
PS: things like this are not clear

$scope.addProduct = function() {
       $scope.products.detail[$scope.ap.id] = $scope.ap;
       delete($scope.ap);
     };

and it is not clear why you create an object in the Products factory, and then invest another object in it if you can immediately invest the properties of the second object and give immediately var Product;

Answer 2

If I understand correctly, then you need a database in which all added products will be stored.