Added demo and fixed bugs
parent
f3f82b5d3b
commit
9b801b8ec7
@ -0,0 +1,9 @@
|
|||||||
|
var DemoCtrl = function($scope, localStorageService) {
|
||||||
|
|
||||||
|
localStorageService.clearAll();
|
||||||
|
|
||||||
|
$scope.$watch('localStorageDemo', function(value){
|
||||||
|
localStorageService.add('localStorageDemo',value);
|
||||||
|
$scope.localStorageDemoValue = localStorageService.get('localStorageDemo');
|
||||||
|
});
|
||||||
|
};
|
@ -0,0 +1,15 @@
|
|||||||
|
body {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .navbar .brand {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-unit h1 {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.prettyprint {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
@ -0,0 +1,129 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Demo of Angular Local Storage Module</title>
|
||||||
|
<meta name="description" content="Demo of Angular Local Storage Module">
|
||||||
|
<meta name="author" content="Gregory Pike">
|
||||||
|
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
|
||||||
|
<!--[if IE]><![endif]--><!-- Used to speed CSS loading -->
|
||||||
|
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
|
||||||
|
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
|
||||||
|
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet">
|
||||||
|
<link href="demo-style.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<body onload="prettyPrint()">
|
||||||
|
|
||||||
|
<!-- BEGIN DEMO -->
|
||||||
|
|
||||||
|
<div class="container" ng-app="LocalStorageModule">
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<a class="brand" href="#">Angular Local Storage</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-unit">
|
||||||
|
|
||||||
|
<h1>Give it a try</h1>
|
||||||
|
|
||||||
|
<div ng-controller="DemoCtrl">
|
||||||
|
<p><input type="text" ng-model="localStorageDemo" placeholder="Start typing..."></p>
|
||||||
|
|
||||||
|
<blockquote class="well" ng-show="localStorageDemoValue">
|
||||||
|
<p>{{localStorageDemoValue}}</p>
|
||||||
|
<small>Local storage value</small>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>The Angular Local Storage Module is meant to be a plug-and-play Angular module for accessing the browsers Local Storage API.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Angular Local Storage offers you access to the browser local storage API through Angular but also allows has the following features:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Control local storage access through key prefices (e.g. "myApp.keyName")</li>
|
||||||
|
<li>Checks browser support and falls back to cookies for antiquated browsers</li>
|
||||||
|
<li>Allows programmatic access to remove all keys for a given app</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Usage</h3>
|
||||||
|
|
||||||
|
<h6>Dependencies:</h6>
|
||||||
|
<ul>
|
||||||
|
<li><code>AngularJS</code> <small><a href="http://angularjs.org/">http://angularjs.org/</a></small></li>
|
||||||
|
<li><code>Angular Local Storage Module</code> <small><a href="localStorageModule.js">localStorageModule.js</a></small></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h6>JS Example</h6>
|
||||||
|
<pre class="prettyprint lang-js">
|
||||||
|
var YourCtrl = function($scope, localStorageService, ...) {
|
||||||
|
// To add to local storage
|
||||||
|
localStorageService.add('localStorageKey','Add this!');
|
||||||
|
// Read that value back
|
||||||
|
var value = localStorageService.get('localStorageKey');
|
||||||
|
}</pre>
|
||||||
|
|
||||||
|
<h3>API Access</h3>
|
||||||
|
|
||||||
|
<table class="table table-striped table-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Call</th>
|
||||||
|
<th>Arguments</th>
|
||||||
|
<th>Action</th>
|
||||||
|
<th>Returns</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>isSupported</code></td>
|
||||||
|
<td class="muted">n/a</td>
|
||||||
|
<td>Checks the browsers support for local storage</td>
|
||||||
|
<td>Boolean for success</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>add</code></td>
|
||||||
|
<td><small>key, value</small></td>
|
||||||
|
<td>Adds a key-value pair to the browser local storage</td>
|
||||||
|
<td>Boolean for success</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>get</code></td>
|
||||||
|
<td><small>key</small></td>
|
||||||
|
<td>Gets a value from local storage</td>
|
||||||
|
<td>Stored value</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>remove</code></td>
|
||||||
|
<td><small>key</small></td>
|
||||||
|
<td>Removes a key-value pair from the browser local storage</td>
|
||||||
|
<td>Boolean for success</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>clearAll</code></td>
|
||||||
|
<td class="muted">n/a</td>
|
||||||
|
<td><span class="label label-warning">Warning</span> Removes all local storage key-value pairs for this app.</td>
|
||||||
|
<td>Boolean for success</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- END DEMO -->
|
||||||
|
|
||||||
|
<!-- JAVASCRIPT -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
|
||||||
|
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
|
||||||
|
<script src="localStorageModule.js"></script>
|
||||||
|
<script src="demo-app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -1,89 +1,121 @@
|
|||||||
var angularLocalStorage = angular.module('LocalStorageModule', []);
|
// Configure Angular Local Storage
|
||||||
|
|
||||||
// Lets set the name of your app before we start.
|
|
||||||
// We can use this for prefixing the names of Local Storage variables
|
|
||||||
var settings = {
|
var settings = {
|
||||||
appName: 'youAppNameHere'
|
|
||||||
};
|
|
||||||
|
|
||||||
angularLocalStorage.service('localStorageService', [function() {
|
|
||||||
|
|
||||||
return {
|
|
||||||
|
|
||||||
// We will prepend the name of the app to the front of each value stored in local storage.
|
|
||||||
// This way we prevent any conflicts with any other data stored in the Local Storage
|
|
||||||
prefix: settings.appName + '.',
|
|
||||||
|
|
||||||
// Checks the browser to see if local storage is supported
|
|
||||||
isSupported: function () {
|
|
||||||
try {
|
|
||||||
return ('localStorage' in window && window['localStorage'] !== null);
|
|
||||||
} catch (e) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Directly adds a value to local storage
|
|
||||||
// If local storage is not available in the browser use cookies
|
|
||||||
// Example use: localStorageService.add('library','angular');
|
|
||||||
add: function (key, value) {
|
|
||||||
|
|
||||||
// If this browser does not support local storage use cookies
|
// You should set a prefix to avoid overwriting any local storage variables from the rest of your app
|
||||||
if (!this.isSupported()) {
|
// prefix: 'youAppNameHere'
|
||||||
console.log('Cannot add to local storage. Get from cookies');
|
appPrefix: 'test'
|
||||||
return false;
|
};
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
/* Start angularLocalStorage */
|
||||||
localStorage.setItem(this.prefix+key, value);
|
|
||||||
//or localStorage[key] = value; //like associative arrays
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e.Description);
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Directly get a value from local storage
|
var angularLocalStorage = angular.module('LocalStorageModule', [])
|
||||||
// Example use: localStorageService.get('library'); // returns 'angular'
|
|
||||||
get: function (key) {
|
|
||||||
if (!this.isSupported()) {
|
|
||||||
console.log('Cannot get from local storage. Use cookies');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return localStorage.getItem(this.prefix+key);
|
// Set the prefix based on the settings object above
|
||||||
//or localStorage[key];
|
angularLocalStorage.constant('prefix', settings.appPrefix || '');
|
||||||
},
|
|
||||||
|
|
||||||
// Remove an item from local storage
|
angularLocalStorage.service('localStorageService', ['prefix', function(prefix) {
|
||||||
// Example use: localStorageService.remove('library'); // removes the key/value pair of library='angular'
|
|
||||||
remove: function (key) {
|
|
||||||
if (!this.isSupported()) {
|
|
||||||
console.log('Cannot remove item from local storage. Remove from cookies');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return localStorage.removeItem(key);
|
// If there is a prefix set in the config lets use that with an appended period for readability
|
||||||
},
|
//var prefix = angularLocalStorage.constant;
|
||||||
|
if (prefix.substr(-1)!=='.') {
|
||||||
|
prefix = !!prefix ? prefix + '.' : '';
|
||||||
|
}
|
||||||
|
|
||||||
// Remove all data for this app from local storage
|
// Checks the browser to see if local storage is supported
|
||||||
// Example use: localStorageService.clearAll();
|
var browserSupportsLocalStorage = function () {
|
||||||
// Should be used mostly for development purposes
|
try {
|
||||||
clearAll: function () {
|
return ('localStorage' in window && window['localStorage'] !== null);
|
||||||
if (!this.isSupported()) {
|
} catch (e) {
|
||||||
console.log('Cannot remove all items from local storage. Remove all app cookies');
|
|
||||||
return false;
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Directly adds a value to local storage
|
||||||
|
// If local storage is not available in the browser use cookies
|
||||||
|
// Example use: localStorageService.add('library','angular');
|
||||||
|
var addToLocalStorage = function (key, value) {
|
||||||
|
|
||||||
|
// If this browser does not support local storage use cookies
|
||||||
|
if (!browserSupportsLocalStorage()) {
|
||||||
|
console.log('Cannot add to local storage. Get from cookies'); // todo
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0 and "" is allowed as a value but let's limit other falsey values like "undefined"
|
||||||
|
if (!value && value!==0 && value!=="") return false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.setItem(prefix+key, value);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e.Description);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Directly get a value from local storage
|
||||||
|
// Example use: localStorageService.get('library'); // returns 'angular'
|
||||||
|
var getFromLocalStorage = function (key) {
|
||||||
|
if (!browserSupportsLocalStorage()) {
|
||||||
|
console.log('Cannot get from local storage. Use cookies'); // todo
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var item = localStorage.getItem(prefix+key);
|
||||||
|
if (!item) return null;
|
||||||
|
return item;
|
||||||
|
//or localStorage[key];
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove an item from local storage
|
||||||
|
// Example use: localStorageService.remove('library'); // removes the key/value pair of library='angular'
|
||||||
|
var removeFromLocalStorage = function (key) {
|
||||||
|
if (!browserSupportsLocalStorage()) {
|
||||||
|
console.log('Cannot remove item from local storage. Remove from cookies'); // todo
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(prefix+key);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e.Description);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove all data for this app from local storage
|
||||||
|
// Example use: localStorageService.clearAll();
|
||||||
|
// Should be used mostly for development purposes
|
||||||
|
var clearAllFromLocalStorage = function () {
|
||||||
|
|
||||||
|
if (!browserSupportsLocalStorage()) {
|
||||||
|
console.log('Cannot remove all items from local storage. Remove all app cookies'); // todo
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var prefixLength = prefix.length;
|
||||||
|
|
||||||
|
for (var key in localStorage) {
|
||||||
|
// Only remove items that are for this app
|
||||||
|
if (key.substr(0,prefixLength) === prefix) {
|
||||||
|
try {
|
||||||
|
removeFromLocalStorage(key.substr(prefixLength));
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e.Description);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
var prefixLength = this.prefix.length;
|
return {
|
||||||
|
isSupported: browserSupportsLocalStorage,
|
||||||
for (var i in localStorage) {
|
add: addToLocalStorage,
|
||||||
// Only remove items that are for this app
|
get: getFromLocalStorage,
|
||||||
if (i.substr(0,prefixLength) === this.prefix)
|
remove: removeFromLocalStorage,
|
||||||
this.remove(i);
|
clearAll: clearAllFromLocalStorage
|
||||||
}
|
};
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}]);
|
}]);
|
||||||
|
Reference in New Issue