답변:
이것은 로컬 저장소에 저장하고 검색하는 약간의 코드입니다. 브로드 캐스트 이벤트를 사용하여 모델의 값을 저장하고 복원합니다.
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;
}]);
sessionStorage
≠localStorage
$window.localStorage.setItem(key,value)
저장, $window.localStorage.getItem(key)
검색 및 $window.localStorage.removeItem(key)
제거에 사용 하는 경우 모든 페이지의 값에 액세스 할 수 있습니다.
$window
서비스를 컨트롤러 로 전달해야합니다 . JavaScript에서는 window
객체를 전 세계적으로 사용할 수 있습니다.
사용하여 $window.localStorage.xxXX()
사용자를 갖는 제어 localStorage
값. 데이터 크기는 브라우저에 따라 다릅니다. window.location.href 를 사용하여 다른 페이지로 이동 하는 $localStorage
한 값만 사용 하면 다른 페이지 <a href="location"></a>
로 이동하는 $localStorage
경우 다음 페이지에서 값이 손실됩니다.
로컬 저장소의 경우 url 아래를 살펴볼 수있는 모듈이 있습니다.
https://github.com/grevory/angular-local-storage
HTML5 로컬 스토리지 및 angularJ에 대한 기타 링크
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
ngStorage
모든 AngularJS 로컬 스토리지 요구에 사용하십시오 . 이것은 Angular JS 프레임 워크의 기본 부분이 아닙니다.
ngStorage
두 가지 서비스를 포함 $localStorage
하고$sessionStorage
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
데모 확인
보다 많은 활동을 갖는 대안 모듈이 하나 더 있습니다 ngStorage
각도 로컬 스토리지 :
나는 angular 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는 여기 .
레포는 여기 .
그것이 누군가를 돕기를 바랍니다!
데이터가 결국 만료되도록하거나 저장하는 레코드 수에 대한 제한을 설정하려는 경우와 같이 필요에 따라 https://github.com/jmdobry/angular-cache 를 참조 하여 다음을 정의 할 수 있습니다. 캐시는 메모리, localStorage 또는 sessionStorage에 있습니다.
여기에는 ngStorage라는 타사 스크립트를 사용해야합니다. 여기에는 사용 방법이 있습니다. 범위 /보기가 변경되어 로컬 저장소가 업데이트됩니다.
<!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>