From 9b801b8ec7831a36226a7517915d48c5ec02d045 Mon Sep 17 00:00:00 2001 From: grevory Date: Tue, 30 Oct 2012 02:29:56 -0400 Subject: [PATCH] Added demo and fixed bugs --- demo-app.js | 9 +++ demo-style.css | 15 ++++ demo.html | 129 +++++++++++++++++++++++++++++ localStorageModule.js | 184 +++++++++++++++++++++++++----------------- 4 files changed, 261 insertions(+), 76 deletions(-) create mode 100644 demo-app.js create mode 100644 demo-style.css create mode 100644 demo.html diff --git a/demo-app.js b/demo-app.js new file mode 100644 index 0000000..9128eb2 --- /dev/null +++ b/demo-app.js @@ -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'); + }); +}; \ No newline at end of file diff --git a/demo-style.css b/demo-style.css new file mode 100644 index 0000000..a675b73 --- /dev/null +++ b/demo-style.css @@ -0,0 +1,15 @@ +body { + margin: 10px; +} + +body .navbar .brand { + color: #FFFFFF; +} + +.hero-unit h1 { + margin: 0 0 10px 0; +} + +pre.prettyprint { + padding: 10px; +} \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..639ede1 --- /dev/null +++ b/demo.html @@ -0,0 +1,129 @@ + + + +Demo of Angular Local Storage Module + + + + + + + + + + + + + + + + + +
+ +
+
+ Angular Local Storage +
+
+ +
+ +

Give it a try

+ +
+

+ +
+

{{localStorageDemoValue}}

+ Local storage value +
+
+ +

The Angular Local Storage Module is meant to be a plug-and-play Angular module for accessing the browsers Local Storage API.

+ +
+ +

Angular Local Storage offers you access to the browser local storage API through Angular but also allows has the following features:

+ + + +

Usage

+ +
Dependencies:
+ + +
JS Example
+ 
+var YourCtrl = function($scope, localStorageService, ...) {
+  // To add to local storage
+  localStorageService.add('localStorageKey','Add this!');
+  // Read that value back
+  var value = localStorageService.get('localStorageKey');
+}
+ +

API Access

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CallArgumentsActionReturns
isSupportedn/aChecks the browsers support for local storageBoolean for success
addkey, valueAdds a key-value pair to the browser local storageBoolean for success
getkeyGets a value from local storageStored value
removekeyRemoves a key-value pair from the browser local storageBoolean for success
clearAlln/aWarning Removes all local storage key-value pairs for this app.Boolean for success
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/localStorageModule.js b/localStorageModule.js index e6a401a..a081259 100644 --- a/localStorageModule.js +++ b/localStorageModule.js @@ -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 + }; }]);