Added demo and fixed bugs
grevory
12 years ago
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', []);
|
||||
|
||||
// Lets set the name of your app before we start.
|
||||
// We can use this for prefixing the names of Local Storage variables
|
||||
// Configure Angular Local Storage
|
||||
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
|
||||
if (!this.isSupported()) {
|
||||
console.log('Cannot add to local storage. Get from cookies');
|
||||
return false;
|
||||
}
|
||||
// You should set a prefix to avoid overwriting any local storage variables from the rest of your app
|
||||
// prefix: 'youAppNameHere'
|
||||
appPrefix: 'test'
|
||||
};
|
||||
|
||||
try {
|
||||
localStorage.setItem(this.prefix+key, value);
|
||||
//or localStorage[key] = value; //like associative arrays
|
||||
} catch (e) {
|
||||
console.error(e.Description);
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
/* Start angularLocalStorage */
|
||||
|
||||
// Directly get a value from local storage
|
||||
// Example use: localStorageService.get('library'); // returns 'angular'
|
||||
get: function (key) {
|
||||
if (!this.isSupported()) {
|
||||
console.log('Cannot get from local storage. Use cookies');
|
||||
return false;
|
||||
}
|
||||
var angularLocalStorage = angular.module('LocalStorageModule', [])
|
||||
|
||||
return localStorage.getItem(this.prefix+key);
|
||||
//or localStorage[key];
|
||||
},
|
||||
// Set the prefix based on the settings object above
|
||||
angularLocalStorage.constant('prefix', settings.appPrefix || '');
|
||||
|
||||
// Remove an item from local storage
|
||||
// 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;
|
||||
}
|
||||
angularLocalStorage.service('localStorageService', ['prefix', function(prefix) {
|
||||
|
||||
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
|
||||
// Example use: localStorageService.clearAll();
|
||||
// Should be used mostly for development purposes
|
||||
clearAll: function () {
|
||||
if (!this.isSupported()) {
|
||||
console.log('Cannot remove all items from local storage. Remove all app cookies');
|
||||
// Checks the browser to see if local storage is supported
|
||||
var browserSupportsLocalStorage = 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');
|
||||
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;
|
||||
|
||||
for (var i in localStorage) {
|
||||
// Only remove items that are for this app
|
||||
if (i.substr(0,prefixLength) === this.prefix)
|
||||
this.remove(i);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
return {
|
||||
isSupported: browserSupportsLocalStorage,
|
||||
add: addToLocalStorage,
|
||||
get: getFromLocalStorage,
|
||||
remove: removeFromLocalStorage,
|
||||
clearAll: clearAllFromLocalStorage
|
||||
};
|
||||
|
||||
}]);
|
||||
|
||||
Reference in New Issue