Как хранить данные в локальном хранилище с помощью Angularjs?
В настоящее время я использую службу для выполнения действия, а именно извлеките данные с сервера, а затем сохраните их на самом сервере.
вместо этого я хочу поместить данные в локальное хранилище, а не хранить их на сервере. Как мне это сделать?
9 ответов
это немного моего кода, который хранит и извлекает в локальное хранилище. я использую широковещательные события для сохранения и восстановления значений в модели.
app.factory('userService', ['$rootScope', function ($rootScope) {
var service = {
model: {
name: '',
email: ''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
}]);
если вы используете $window.localStorage.setItem(key,value)
в магазине$window.localStorage.getItem(key)
для получения и $window.localStorage.removeItem(key)
чтобы удалить, вы можете получить доступ к значениям на любой странице.
вы должны пройти $window
сервис в контроллер. Хотя в JavaScript window
объект доступен глобально.
С помощью $window.localStorage.xxXX()
пользователь имеет контроль над localStorage
значение. Размер данных зависит от браузера. Если вы используете только $localStorage
тогда значение остается до тех пор, пока вы используете для перехода на другую страницу, и если вы используете <a href="location"></a>
для перехода на другую страницу, то ваш $localStorage
значение теряется на следующей странице.
для локального хранения есть модуль для этого посмотрите ниже url:
https://github.com/grevory/angular-local-storage
и другая ссылка для локального хранилища HTML5 и angularJs
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
использовать ngStorage
Для Всех Ваших Потребностей Локального Хранилища AngularJS. Обратите внимание, что это не является родной частью угловой структуры JS.
ngStorage
содержит две службы: $localStorage и $sessionStorage.
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
Регистрация демо
есть еще один альтернативный модуль, который имеет большую активность, чем ngStorage
угловое локальное хранилище:
в зависимости от ваших потребностей, например, если вы хотите, чтобы данные в конечном итоге истекли или установить ограничения на количество записей для хранения, вы также можете посмотреть наhttps://github.com/jmdobry/angular-cache что позволяет определить, находится ли кэш в памяти, localStorage или sessionStorage.
Я создал (еще один) угловой сервис хранения html5. Я хотел сохранить автоматические обновления, сделанные ngStorage, но сделать циклы дайджеста более предсказуемыми / интуитивно понятными (по крайней мере для меня), добавить события для обработки, когда требуются перезагрузки состояния, а также добавить совместное хранение сеанса между вкладками. Я смоделировал API после $resource и назвал его angular-stored-object. Его можно использовать следующим образом:
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}
API: http://yaacovcr.github.io/angular-stored-object/docs/#/api
РЕПО:https://github.com/yaacovCR/angular-stored-object
надеюсь, что это поможет кому-то!
вы можете использовать localStorage для этой цели.
действия:
add ngStorage.min.js in your file
add ngStorage dependency in your module
add $localStorage module in your controller
use $localStorage.key = value
для этого нужно использовать сторонний скрипт, называемый ngstorage вот пример использования.Он обновляет localstorage с изменением области / представления.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- CDN Link -->
<!--https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js-->
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var app = angular.module('app', ['ngStorage']);
app.factory("myfactory", function() {
return {
data: ["ram", "shyam"]
};
})
app.controller('Ctrl', function($scope, $localStorage, $sessionStorage, myfactory) {
$scope.abcd = $localStorage; //Pass $localStorage (or $sessionStorage) by reference to a hook under $scope
// Delete from Local Storage
//delete $scope.abcd.counter;
// delete $localStorage.counter;
// $localStorage.$reset(); // clear the localstorage
/* $localStorage.$reset({
counter: 42 // reset with default value
});*/
// $scope.abcd.mydata=myfactory.data;
});
</script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<button ng-click="abcd.counter = abcd.counter + 1">{{abcd.counter}}</button>
</body>
</html>