現在のところ、サービスを使用して操作を実行しています。すなわち、 というデータをサーバーから取得し、そのデータをサーバー自体に格納しています。Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか？
代わりに、データをサーバーに格納するのではなく、ローカルストレージに格納したいと考えています。これはどうすればいいですか？これはビットであるHTML5のローカルストレージのための
https://github.com/grevory/angular-local-storage
や他のリンクとangularJs
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
：ローカルストレージのために
は、以下のURLをご覧ためのモジュールがありローカルストレージに格納して取得する私のコード。私はブロードキャストイベントを使用して、モデルの値を保存して復元します。
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;
}]);
外部リンクが消滅する傾向があるため、LinkOverflowでのリンクのみの回答はお勧めしません。 –
ngStorageすべてのAngularJSローカルストレージのニーズについてこれはAngular JSフレームワークのネイティブな部分ではないことに注意してください。
ngStorageには、$ localStorageと$ sessionStorageという2つのサービスが含まれています。
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
は、角度の一部ではなく、追加のファイルとしてインポートする必要があります。 – Serge
npmモジュールへのリンク？ – chovy
https://www.npmjs.com/package/ngstorage-> https://github.com/gsklee/ngStorage – Unicornist
をチェックngStorage
角度ローカル・ストレージよりも多くの活性を有する1つの以上の代替のモジュールがあります：
は、必要に応じて、データが最終的に期限切れになることを許可したい場合、またはレコードの数の制限を設定する場合ストアする場合は、https://github.com/jmdobry/angular-cacheを見ると、キャッシュがメモリ、localStorage、またはsessionStorageにあるかどうかを定義できます。
私は角形html5ストレージサービス（さらに別の）を作成しました。 ngStorageによって自動更新を可能にしたいが、ダイジェストサイクルをより予測可能/直感的に（少なくとも私にとっては）行い、ステートの再ロードが必要なときに処理するイベントを追加し、タブ間で共有セッションストレージを追加したい。私は$ resourceの後にAPIをモデル化し、それを角格納オブジェクトと呼んだ。これは次のように使用することができます。
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
はそれが誰かを役に立てば幸い！
ダウン投票者が投票を説明してくれますか？ – DerMike
私は現在、プロジェクトでangle-stored-objectを使用しています。本当に使いやすいです。さらに、Yaacovは質問に答えるのに本当に早いです。だから私もそれをお勧めします！ –
$window.localStorage.setItem(key,value)を使用して保存する場合は、$window.localStorage.getItem(key)を検索し、$window.localStorage.removeItem(key)を入力すると、任意のページの値にアクセスできます。
windowオブジェクトはグローバルに利用可能ですが、$windowサービスをコントローラに渡す必要があります。
$window.localStorage.xxXX()を使用すると、ユーザーはlocalStorage値を制御できます。データのサイズはブラウザによって異なります。あなたが唯一の$localStorageを使用している場合でも、値が限り、あなたは他のページに移動する window.location.href を使用し、他のページに移動し<a href="location"></a>を使用している場合、あなたの$localStorage値は、次のページで失われるとして残ります。
この解決法は私に最も適していました。プラグインまたはモジュールを使用してDOMに直接簡単に移動できるのはなぜですか？単純な文字列ではなくオブジェクトを格納したかったので、setItem（）とangular.fromJson（）と組み合わせてangle.toJson（）をgetItem（）と組み合わせて使用しました。簡単です。大好きです。 –
これは最高の答えです。外部依存関係は必要ありません。 –
合意すると、これはキーと値のペア管理のための最も簡単なソリューションです – jolySoft
目的には、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 use.Itする方法の例です。
<!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>
どのようにこれを使用しますか？ – chovy
chovy、ここに完全な例がありますhttp://stackoverflow.com/questions/12940974/maintain-model-of-scope-when-changing-between-views-in-angularjs/16559855#16559855 – Anton
" 'sessionStorage'''≠' '' localStorage''' –