angularjs 및 local스토리지 변경 이벤트

angularjs 및 local스토리지 변경 이벤트

일부 데이터를 로컬 스토리지에 저장합니다.

제 angularjs 앱에서 원하는 것은 localStorage의 데이터가 변경되었을 때 앱의 사전 표시자가 변경되면 어떻게 해야 합니까?

각도 로컬 스토리지 모듈이 있습니다.

https://github.com/grevory/angular-local-storage

var DemoCtrl = function($scope, localStorageService) {

  localStorageService.clearAll();

  $scope.$watch('localStorageDemo', function(value){
    localStorageService.add('localStorageDemo',value);
    $scope.localStorageDemoValue = localStorageService.get('localStorageDemo');
  });

  $scope.storageType = 'Local storage';

  if (!localStorageService.isSupported()) {
    $scope.storageType = 'Cookie';
  }

};

LocalStorage(로컬 스토리지)가 변경되었는지 여부를 알 수 있도록 모듈을 setItem에서 브로드캐스트하도록 변경해야 할 수도 있습니다.아마도 포크와 50번 선 주변:

localStorage.setItem(prefix+key, value);
$rootScope.$broadcast('LocalStorageModule.notification.setItem',{key: prefix+key, newvalue: value});  // you could broadcast the old value if you want

또는 최근 버전의 라이브러리에서 케이스가 변경되었습니다.

$rootScope.$broadcast('LocalStorageModule.notification.setitem',{key: prefix+key, newvalue: value}); 

그러면 컨트롤러에서 다음을 수행할 수 있습니다.

$scope.$on('LocalStorageModule.notification.setItem', function(event, parameters) {
   parameters.key;  // contains the key that changed
   parameters.newvalue;  // contains the new value
});

다음은 두 번째 옵션의 데모입니다.데모: http://beta.plnkr.co/lpAm6SZdm2oRBm4LoIi1

** 업데이트됨 **

저는 그 프로젝트를 시작했고 이 프로젝트를 사용하려는 경우에 여기에 알림을 포함시켰습니다. https://github.com/sbosell/angular-local-storage/blob/master/localStorageModule.js

저는 원래 도서관에서 제 PR을 받아들였다고 생각합니다.제가 이 라이브러리를 좋아하는 이유는 브라우저가 로컬 스토리지를 지원하지 않을 경우를 대비해 쿠키 백업이 되어 있기 때문입니다.

참고로 Angular용 로컬 스토리지 모듈을 하나 더 만들었습니다.ngStorage라고 하는 JS:

https://github.com/gsklee/ngStorage

사용 방법이 매우 간단합니다.

자바스크립트

$scope.$storage = $localStorage.$default({
    x: 42
});

HTML

<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button>

그리고 모든 변경사항은 자동으로 동기화됩니다. 심지어 다른 브라우저 탭에서도 변경사항이 발생합니다!

GitHub 프로젝트 페이지에서 자세한 데모 및 예시 확인 ;)

최근에 $scope 변수에 로컬 스토리지 키를 간단히 바인딩할 수 있는 모듈을 만들었습니다. 또한 객체, 배열, 부울런 등을 로컬 스토리지 내부에 직접 저장할 수도 있습니다.

Github 로컬 스토리지 모듈

$scope.$on("LocalStorageModule.notification.setitem", function (key, newVal, type) {
      console.log("LocalStorageModule.notification.setitem", key, newVal, type);
    });

$scope.$on("LocalStorageModule.notification.removeitem", function (key, type) {
  console.log("LocalStorageModule.notification.removeitem", key, type);
});

$scope.$on("LocalStorageModule.notification.warning", function (warning) {
  console.log("LocalStorageModule.notification.warning", warning);
});

$scope.$on("LocalStorageModule.notification.error", function (errorMessage) {
  console.log("LocalStorageModule.notification.error", errorMessage);
});

https://github.com/grevory/angular-local-storage#getstoragetype 을 사용할 때 이 이벤트 호출

앱 구성에서

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('myApp')
    .setStorageType('sessionStorage')
    .setNotify(true, true)
});

언급URL : https://stackoverflow.com/questions/16150311/angularjs-and-localstorage-change-event