/ JavaScript

AngularJS - $sessionStorage

AngularJS - $sessionStorage

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


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

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 sessionStorage is useful for persisting data within the current browser session.

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


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

Supported Browsers

angular-swx-session-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 $sessionStorage can be installed with npm; to install use:

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

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

bower install angular-swx-session-storage

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


Simply add the angular-swx-session-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-session-storage.min.js"></script>

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

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

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

Available Methods

AngularJS $sessionStorage 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:

$sessionStorage.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:

$sessionStorage.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:

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

To store data for one hour; you could use:

$sessionStorage.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 sessionStorage; 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 sessionStorage 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 sessionStorage if required.

In order to clear everything stored by your application within sessionStorage 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: www.mydomain.com, items will be stored with a prefix of ’mydomain_’; so an item stored with key ’myKey’ is stored within sessionStorage 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.