Сохранение значений в angularjs

Question

Так что, мне было интересно, можно ли хранить значения приложения внутри чего-то, поэтому нужно загружать только 1 раз, когда основное приложение загружается. Поскольку теперь у меня есть контроллер, и каждый раз, когда мне нужно какое-то свойство от пользователя, контроллер отправляет запрос в базу данных. И это не может быть хорошо?

Контроллер:

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('UserPropertiesController', UserPropertiesController); 

    UserPropertiesController.$inject = ['$scope', '$http']; 
    function UserPropertiesController($scope, $http) { 

     $http.get('/user').success(function(data) { 

      $http.post('/setuser/',data.name).success(function() { 

       $http.get('/getuser/').success(function(data) { 

        $scope.userdata = data; 


       }) 
      }) 
     }) 

    } 

})(); 

И некоторые HTML страницы, как это:

<!-- Testing stuff --> 
<div ng-controller="UserPropertiesController" class="container"> 

    <p>The ID is {{userdata.id}}</p> 
    <p>The email is {{userdata.email}}</p> 

</div> 

Answer 1

У вас есть несколько различных вариантов хранения данных на стороне клиента. Вы, безусловно, должны поместить все ваши призывы ajax в службу, независимо от того, какой вы выберете, это упростит обслуживание.

1: Использовать кеш $ http. Это простой в памяти магазин, встроенный в службу $http. При реализации вы продолжаете делать свои звонки $http как обычно, но будут отвечать данными в магазине, если они доступны. Минусы являются его в Memeory так занимает ресурсы и будут потеряны, если пользователь нажимает «X» https://docs.angularjs.org/api/ng/service/ $ HTTP # кэширование

2: LocalStorage/SessionStorage Большинство современных браузеров теперь поддерживают LocalStorage и SessionStorage достаточно хорошо. Он достаточно быстрый и имеет невероятно простой API. Это также синхронно, поэтому очень просто реализовать. Нижняя сторона - это не большая емкость, и вы храните свои данные в парах значений ключей, где данные должны быть строкой. Поэтому сначала вам нужно превратить свои данные в JSON. SessionStorage стирается, когда сеанс пользователя заканчивается, однако LocalStorage будет сохраняться до тех пор, пока пользователь не очистит его или не выполнит код. https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

3: IndexedDB Большинство современных браузеров поддерживают это, но менее, чем LocalStorage. Это выбор по выбору (по-моему) для больших объемов хранения клиентских данных. Это, по сути, полнофункциональная клиентская база данных. У вас есть коллекции, транзакционные запросы, индексы. Он полностью асинхронный. нижняя сторона этой мощности - сложность, и для этого требуется выделение большего количества кода шаблона, связанного с обновлением версии DB. Ive использовал его в прошлом в видеоиграх на основе браузера. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

4: Сверните свой собственный Наконец, есть возможность смешать любой из этих способов. Благодаря мощной системе перехватчиков углов вы можете реализовать свое собственное кэширование $ http с использованием localSotrage или indexedDB или в памяти, что дает вам гораздо больше контроля над кешем, чем значение по умолчанию. https://docs.angularjs.org/api/ng/service/ $ http # перехватчики

Или вы можете просто сохранить данные в своем сервисе.

.service('user', function ($http, $q) { 
    var user; 

    this.getUser = function() { 
     if (!user) { 
      return $http.get('/user') 
       .then(function (data) { 
        user = data; 

        return data; 
       }); 
     } else { 
      return $q.when(user); 
     } 
    } 
}); 

Надеюсь, что это поможет, также легко лечь это мой первый вид ответа на запись.

Answer 2

Пожалуйста, посмотрите на angular localforage. Вы можете использовать его для хранения пар ключ/значение в локальном хранилище.