<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="ngstr.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TodoCtrl">
<div class="row col-xs-12">
<div class="col-xs-6">
<table class="table table-striped table-condensed ">
<tbody>
<tr ng-repeat="todo in todos">
<td>{{ todo.age }}</td>
<td><button data-ng-click="cloneItem(todo)">to local</button></td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6 well">
<ul class="unstyled">
<li data-ng-repeat="item in data">
<span>
id:{{ item.id }}
<button ng-click="increment();">+</button>
age:{{ item.age }}
<button ng-click="decrement();">-</button>
<button data-ng-click="delItem(item)">X</button>
</span>
</li>
</ul>
</div>
</div>
</body>
</html>
var App = angular.module('App', ['ngStorage']);
App.controller('TodoCtrl', function($scope, $http, $localStorage) {
// Set a default
$scope.$storage = $localStorage.$default({
"notes": [{
"age": "1",
"id": "2"
}, {
"age": "12",
"id": "13"
}]
});
$http.get('todos.txt').then(function(res) {
$scope.todos = res.data;
});
$scope.cloneItem = function(todo) {
$scope.$storage.notes.push({
"age": todo.age,
"id": todo.id
});
}
$scope.data = $localStorage.notes;
$scope.delItem = function(item) {
$localStorage.notes.splice($localStorage.notes.indexOf(item), 1);
}
var max = $scope.age + 1;
var min = $scope.age - 1;
$scope.increment = function() {
if ($scope.age >= max) {
return;
}
$scope.item.age++;
};
$scope.decrement = function() {
if ($scope.age <= min) {
return;
}
$scope.age--;
};
});
[
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 1,
"id": "motorola-xoom",
"imageUrl": "img/phones/motorola-xoom.0.jpg",
"name": "MOTOROLA XOOM\u2122",
"snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 2,
"carrier": "AT&T",
"id": "motorola-atrix-4g",
"imageUrl": "img/phones/motorola-atrix-4g.0.jpg",
"name": "MOTOROLA ATRIX\u2122 4G",
"snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
},
{
"age": 3,
"id": "dell-streak-7",
"imageUrl": "img/phones/dell-streak-7.0.jpg",
"name": "Dell Streak 7",
"snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
},
{
"age": 4,
"carrier": "Cellular South",
"id": "samsung-gem",
"imageUrl": "img/phones/samsung-gem.0.jpg",
"name": "Samsung Gem\u2122",
"snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
},
{
"age": 5,
"carrier": "Dell",
"id": "dell-venue",
"imageUrl": "img/phones/dell-venue.0.jpg",
"name": "Dell Venue",
"snippet": "The Dell Venue; Your Personal Express Lane to Everything"
},
{
"age": 6,
"carrier": "Best Buy",
"id": "nexus-s",
"imageUrl": "img/phones/nexus-s.0.jpg",
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
},
{
"age": 7,
"carrier": "Cellular South",
"id": "lg-axis",
"imageUrl": "img/phones/lg-axis.0.jpg",
"name": "LG Axis",
"snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
},
{
"age": 8,
"id": "samsung-galaxy-tab",
"imageUrl": "img/phones/samsung-galaxy-tab.0.jpg",
"name": "Samsung Galaxy Tab\u2122",
"snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
},
{
"age": 9,
"carrier": "Cellular South",
"id": "samsung-showcase-a-galaxy-s-phone",
"imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg",
"name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone",
"snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
},
{
"age": 10,
"carrier": "Verizon",
"id": "droid-2-global-by-motorola",
"imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg",
"name": "DROID\u2122 2 Global by Motorola",
"snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
},
{
"age": 11,
"carrier": "Verizon",
"id": "droid-pro-by-motorola",
"imageUrl": "img/phones/droid-pro-by-motorola.0.jpg",
"name": "DROID\u2122 Pro by Motorola",
"snippet": "The next generation of DOES."
},
{
"age": 12,
"carrier": "AT&T",
"id": "motorola-bravo-with-motoblur",
"imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg",
"name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122",
"snippet": "An experience to cheer about."
},
{
"age": 13,
"carrier": "T-Mobile",
"id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
"snippet": "Are you ready for everything life throws your way?"
},
{
"age": 14,
"carrier": "T-Mobile",
"id": "t-mobile-mytouch-4g",
"imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg",
"name": "T-Mobile myTouch 4G",
"snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
},
{
"age": 15,
"carrier": "US Cellular",
"id": "samsung-mesmerize-a-galaxy-s-phone",
"imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg",
"name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone",
"snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
},
{
"age": 16,
"carrier": "Sprint",
"id": "sanyo-zio",
"imageUrl": "img/phones/sanyo-zio.0.jpg",
"name": "SANYO ZIO",
"snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
},
{
"age": 17,
"id": "samsung-transform",
"imageUrl": "img/phones/samsung-transform.0.jpg",
"name": "Samsung Transform\u2122",
"snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
},
{
"age": 18,
"id": "t-mobile-g2",
"imageUrl": "img/phones/t-mobile-g2.0.jpg",
"name": "T-Mobile G2",
"snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
},
{
"age": 19,
"id": "motorola-charm-with-motoblur",
"imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg",
"name": "Motorola CHARM\u2122 with MOTOBLUR\u2122",
"snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service."
}
]
'use strict';
(function () {
/**
* @ngdoc overview
* @name ngStorage
*/
angular.module('ngStorage', []).
/**
* @ngdoc object
* @name ngStorage.$localStorage
* @requires $rootScope
* @requires $window
*/
factory('$localStorage', _storageFactory('localStorage')).
/**
* @ngdoc object
* @name ngStorage.$sessionStorage
* @requires $rootScope
* @requires $window
*/
factory('$sessionStorage', _storageFactory('sessionStorage'));
function _storageFactory(storageType) {
return [
'$rootScope',
'$window',
'$log',
function (
$rootScope,
$window,
$log
) {
// #9: Assign a placeholder object if Web Storage is unavailable to prevent breaking the entire AngularJS app
var webStorage = $window[storageType] || ($log.warn('This browser does not support Web Storage!'), {}),
$storage = {
$default: function (items) {
for (var k in items) {
angular.isDefined($storage[k]) || ($storage[k] = items[k]);
}
return $storage;
},
$reset: function (items) {
for (var k in $storage) {
'$' === k[0] || delete $storage[k];
}
return $storage.$default(items);
}
},
_last$storage,
_debounce;
for (var i = 0, k; i < webStorage.length; i++) {
// #8, #10: `webStorage.key(i)` may be an empty string (or throw an exception in IE9 if `webStorage` is empty)
(k = webStorage.key(i)) && 'ngStorage-' === k.slice(0, 10) && ($storage[k.slice(10)] = angular.fromJson(webStorage.getItem(k)));
}
_last$storage = angular.copy($storage);
$rootScope.$watch(function () {
_debounce || (_debounce = setTimeout(function () {
_debounce = null;
if (!angular.equals($storage, _last$storage)) {
angular.forEach($storage, function (v, k) {
angular.isDefined(v) && '$' !== k[0] && webStorage.setItem('ngStorage-' + k, angular.toJson(v));
delete _last$storage[k];
});
for (var k in _last$storage) {
webStorage.removeItem('ngStorage-' + k);
}
_last$storage = angular.copy($storage);
}
}, 100));
});
// #6: Use `$window.addEventListener` instead of `angular.element` to avoid the jQuery-specific `event.originalEvent`
'localStorage' === storageType && $window.addEventListener && $window.addEventListener('storage', function (event) {
if ('ngStorage-' === event.key.slice(0, 10)) {
event.newValue ? $storage[event.key.slice(10)] = angular.fromJson(event.newValue) : delete $storage[event.key.slice(10)];
_last$storage = angular.copy($storage);
$rootScope.$apply();
}
});
return $storage;
}
];
}
})();