Angularjs를 사용하여 로컬 스토리지에 데이터를 저장하는 방법은 무엇입니까?
현재 서버에서 데이터를 가져와 서버 자체에 저장하는 등의 작업을 수행하는 서비스를 사용하고 있습니다.
이 대신 데이터를 서버에 저장하지 않고 로컬 스토리지에 저장하려고 합니다.이거 어떻게 해?
로컬 스토리지에 저장하고 검색하는 코드 중 일부입니다.브로드캐스트이벤트를 사용하여 모델의 값을 저장하고 복원합니다.
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컨트롤러에 대한 서비스합니다.자바스크립트에서는window오브젝트는 글로벌하게 사용할 수 있습니다.
사용방법$window.localStorage.xxXX()사용자가 컨트롤 할 수 있습니다.localStorage브라우저에 따라 데이터 크기가 달라집니다.사용만 하는 경우$localStoragewindow.location을 사용하는 한 값은 유지됩니다.href를 사용하여 다른 페이지로 이동하고<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모든 것을 위한 각도JS 로컬 스토리지의 필요성.이것은 Angular JS 프레임워크의 네이티브 부분이 아닙니다.
ngStorage에는 2개의 서비스가 포함되어 있습니다.$localStorage그리고.$sessionStorage
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
데모 확인
다음보다 더 많은 활동이 있는 대체 모듈이 하나 더 있습니다.ngStorage
angular-local-스토리지:
https://github.com/grevory/angular-local-storage
사용할 수 있습니다.localStorage그 목적을 위해서.
순서:
- 파일에 ngStorage.min.js 추가
- 모듈에 ng스토리지 의존관계 추가
- 컨트롤러에 $localStorage 모듈 추가
- $localStorage를 사용합니다.키 = 값
각도가 있는 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가 있어요.
레포 왔다.
도움이 됐으면 좋겠네요!
Angular - 로컬 저장소에 데이터를 저장하려면 다음 단계를 따릅니다.
- 폴더에 'ngStorage.js'를 추가합니다.
angular.module에 'ngStorage'를 삽입합니다.
eg: angular.module("app", [ 'ngStorage']);$localStorageapp.controller로 이동합니다.
4개 할 수 . 사용할 수 있습니다.$localStorage
Eg: $localstorage.login= true;
위는 브라우저 응용 프로그램에 로컬 스토리지를 저장합니다.
데이터가 최종적으로 만료되도록 허용하거나 저장할 레코드 수를 제한하려는 경우 등 필요에 따라 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>
언급URL : https://stackoverflow.com/questions/18247130/how-do-i-store-data-in-local-storage-using-angularjs
'programing' 카테고리의 다른 글
| Oracle SQL 날짜에서 시간을 제거하는 방법 (0) | 2023.03.25 |
|---|---|
| 반응에서 material-UI 선택 상자에서 기본값을 설정하는 방법은 무엇입니까? (0) | 2023.03.25 |
| angularjs에서 inside select box 옵션을 ng-translate하는 방법 (0) | 2023.03.25 |
| 메뉴에 사용자 지정 게시 유형 보관을 추가하는 방법 (0) | 2023.03.25 |
| jQuery UI 날짜 선택기 - 수집되지 않은 유형 오류: 정의되지 않은 속성 'msie'를 읽을 수 없습니다. (0) | 2023.03.25 |