Angularjs를 사용하여 로컬 스토리지에 데이터를 어떻게 저장합니까?


177

현재 서비스를 사용하여 작업을 수행합니다. 즉 서버에서 데이터를 검색 한 다음 서버 자체에 데이터를 저장합니다.

이 대신 서버에 데이터를 저장하는 대신 로컬 스토리지에 데이터를 저장하고 싶습니다. 어떻게해야합니까?

답변:


125

이것은 로컬 저장소에 저장하고 검색하는 약간의 코드입니다. 브로드 캐스트 이벤트를 사용하여 모델의 값을 저장하고 복원합니다.

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;
}]);

9
이것을 어떻게 사용합니까?
chovy

4
chovy, 여기 완전한 각도 예제 stackoverflow.com/questions/12940974/…
Anton

290
기록 sessionStoragelocalStorage
Mars Robertson

4
$ window.sessionStorage를 사용하여 테스트에 주입 할 수 있습니다
Guillaume Massé


105

$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경우 다음 페이지에서 값이 손실됩니다.


12
이 솔루션은 나에게 가장 적합했습니다. DOM에 쉽게 접근 할 수 있는데 왜 플러그인이나 모듈을 사용해야합니까? 간단한 문자열이 아닌 객체를 저장하고 싶었 기 때문에 setItem () 및 angular.fromJson ()을 getItem ()과 함께 사용하여 angular.toJson ()을 사용했습니다. 쉬운. 그것을 사랑하십시오.
Brett Donald 1

5
이것이 가장 좋은 대답입니다. 외부 의존성이 필요하지 않습니다.
카스퍼 Ziemianek

2
동의, 이것은 키 / 값 쌍 관리를위한 가장 간단한 솔루션입니다
jolySoft

줄의 핵심은 무엇입니까 : $ window.localStorage.setItem (key, value). 어디에서 선언하고 설정합니까?

열쇠는 당신이 원하는 것이 무엇이든 ID의 고유 가치입니다. 따라서 무언가를 저장할 때 키를 정의하면 키를 검색하는 데 사용하는 것과 동일합니다.
user441521


50

ngStorage모든 AngularJS 로컬 스토리지 요구에 사용하십시오 . 이것은 Angular JS 프레임 워크의 기본 부분이 아닙니다.

ngStorage 두 가지 서비스를 포함 $localStorage하고$sessionStorage

angular.module('app', [
   'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage,
    $sessionStorage
){});

데모 확인


24
그것은 각도의 일부가 아니며 추가 파일로 가져와야 함을 언급 할 가치가 있습니다.
Serge

1
npm 모듈에 연결 하시겠습니까?
chovy


2

당신이 사용할 수있는 localStorage목적에 맞게 .

단계 :

  1. 파일에 ngStorage.min.js를 추가하십시오
  2. 모듈에 ngStorage 종속성 추가
  3. 컨트롤러에 $ localStorage 모듈 추가
  4. $ localStorage.key = value 사용

2

나는 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는 여기 .

레포는 여기 .

그것이 누군가를 돕기를 바랍니다!


다운 유권자들이 투표에 대해 설명해 주실 래요?
DerMike

1
현재 프로젝트에서 각도 저장 객체를 사용하고 있으며 사용하기가 정말 쉽습니다. 또한 Yaacov는 질문에 빠르게 답변합니다. 그래서 나도 그것을 추천합니다!
JR Utily 2012

2

Angular-로컬 스토리지에 데이터를 저장하는 단계를 수행하십시오.

  1. 폴더에 'ngStorage.js'를 추가하십시오.
  2. 각도 모듈에 'ngStorage'를 주입하십시오.

        eg: angular.module("app", [ 'ngStorage']);
  3. $localStorageapp.controller 함수에 추가

4. $localStorage컨트롤러 내부에서 사용 가능

Eg: $localstorage.login= true;

위의 내용은 브라우저 응용 프로그램에 로컬 저장소를 저장합니다



1

여기에는 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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.