AngularJS - $localStorage

AngularJS - $localStorage by Scriptwerx [] is a service for use in your AngularJS applications. Description Provides a key-value (string-object) storage, that is backed by localStorage with

8 years ago

Latest Post Magic Leap 1 by Scriptwerx public

AngularJS - $localStorage

AngularJS - $localStorage by Scriptwerx is a service for use in your AngularJS applications.


Provides a key-value (string-object) storage, that is backed by localStorage with support for expiry (in days).

Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson and are also held within a session cache for optimal retrieval.

Storing items in localStorage is useful for persisting data between browser sessions.

Data stored in this manner will not be deleted when the browser (or browser tab) is closed; nor if the page is refreshed.


angular-swx-local-storage depends on angular.js, and is tested on version 1.3.14.

Supported Browsers

angular-swx-local-storage will function correctly within all browsers that support Web Storage.

N.B. For browsers with Web Storage disabled or in private browsing mode; a simple session Object fallback is used - please be aware of the limitations in this scenario.


AngularJS $localStorage can be installed with npm; to install use:

npm install --save-dev angular-swx-local-storage

AngularJS $localStorage is also packaged as a bower component; to install use:

bower install angular-swx-local-storage

You can of course; download the service from the git repository.


Simply add the angular-swx-local-storage asset to your project and include it in your HTML or as part of your build process.

<script type="text/javascript" src="angular-swx-local-storage.min.js"></script>

angular-swx-local-storage.js should appear after angular.js is included. Prefer minified assets (.min) for production.

myApp.$inject = ['$localStorage'];
function myApp($localStorage) {
    // Your app code...

    .module('myApp', ['swxLocalStorage']);

Available Methods

AngularJS $localStorage has been designed for simplicity; as such there’s only one configurable option; which is to set a custom prefix instead of the standard - this is rarely needed.

Method: put

In order to set a value; the put method should be used as follows:

$localStorage.put('myKey', 'myValue');

The key; specified as ’myKey’ is used to allow retrieval of the value, in this case ’myValue’.

The value can be set as any type (Number, String, Object, Array) and will be deserialized when stored.

N.B. You cannot store a Method.

An optional expiry (in days) is available; in order to set a value to expire after 30 days you should use:

$localStorage.put('myKey', 'myValue', 30);

If you need to store a value for less, or more time - you can always calculate more/less days.

For example; to store data for (approximately) two years you could use:

$localStorage.put('myKey', 'myValue', 365 * 2);

To store data for one hour; you could use:

$localStorage.put('myKey', 'myValue', 1 / 24);

Method: get

In order to retrieve a previously stored value; the get method should be used as follows:


If the value is not available within localStorage; undefined will be returned.

If the value has been stored with an expiry; this will be checked to ensure the value is still current - if so; the value will be returned, if not; the value will be deleted from localStorage and undefined will be returned.

Method: remove

In order to remove a previously stored value; the remove method should be used as follows:


Once removed; any request to retrieve the value will return undefined.

Method: empty

You are able to clear all data stored within localStorage if required.

In order to clear everything stored by your application within localStorage you should use the following:


This will only clear items only stored by your application (unless you configure more than one application to use the same prefix).

Method: prefix

Items are stored using a dynamically generated prefix based on the hosted domain.

For an application on domain: ‘’, items will be stored with a prefix of ’mydomain_’; so an item stored with key ’myKey’ is stored within localStorage as ’mydomain_myKey’.

This can be changed using the prefix method as follows:


Your chosen prefix will be appended with ’_’.

Setting the prefix as noted above will result in an item with ’myKey’ to be stored as ’myPrefix_myKey’.

N.B. The prefix method is NOT designed to be used multiple times within your application and such use could lead to unexpected results or issues.


Published 8 years ago