9 JavaScript Libraries for Working with Local Storage

9 JavaScript Libraries for Working with Local Storage


The HTML5 Local Storage API (part of Web Storage) has excellent browser support and is being used in more and more applications. It has a simple API and certainly has its drawbacks, similar to cookies.

Over the past year or so I’ve come across quite a few tools and libraries that use the localStorage API so I’ve compiled many of them together into this post with some code examples and discussion of the features.

Lockr

Lockr is a wrapper for the localStorage API and lets you use a number of useful methods and features. For example, while localStorage is limited to storing only strings, Lockr lets you store different data types without the need to do the conversion yourself:


1
2
3
4
Lockr<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">,</span> <span class="token string">'SitePoint'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// string</span>
Lockr<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'categories'</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// number</span>
Lockr<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'users'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Jane Doe'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">19</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// object</span>

Other features include:

  • Retrieve all key/value pairs with the Lockr.get() method
  • Compile all key/value pairs into an array with Lockr.getAll()
  • Delete all stored key/value pairs with Lockr.flush()
  • Add/remove values under a hash key using Lockr.sadd and Lockr.srem

The Local Storage Bridge

A 1KB library to facilitate exchanging messages between tabs in the same browser, using localStorage as the communication channel. After including the library, here’s some sample code you might use:


1
2
3
4
5
6
7
8
9
<span class="token comment" spellcheck="true">// send a message</span>
lsbridge<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'my-namespace'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  message<span class="token punctuation">:</span> <span class="token string">'Hello world!'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// listen for messages</span>
lsbridge<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'my-namespace'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// prints: 'Hello world!'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

As shown, the send() method creates and sends the message and the subscribe() method lets you listen for the specified message. You can read more about the library in this blog post.

Barn

This library provides a Redis-like API with a “fast, atomic persistent storage layer” on top of localStorage. Below is an example code snippet taken from the repo’s README. It demonstrates many of the methods available.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span class="token keyword">var</span> barn <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Barn</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">)</span><span class="token punctuation">;</span>

barn<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">,</span> <span class="token string">'val'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>barn<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// val</span>

barn<span class="token punctuation">.</span><span class="token function">lpush</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token string">'val1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
barn<span class="token punctuation">.</span><span class="token function">lpush</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token string">'val2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>barn<span class="token punctuation">.</span><span class="token function">rpop</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// val1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>barn<span class="token punctuation">.</span><span class="token function">rpop</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// val2</span>

barn<span class="token punctuation">.</span><span class="token function">sadd</span><span class="token punctuation">(</span><span class="token string">'set'</span><span class="token punctuation">,</span> <span class="token string">'val1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
barn<span class="token punctuation">.</span><span class="token function">sadd</span><span class="token punctuation">(</span><span class="token string">'set'</span><span class="token punctuation">,</span> <span class="token string">'val2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
barn<span class="token punctuation">.</span><span class="token function">sadd</span><span class="token punctuation">(</span><span class="token string">'set'</span><span class="token punctuation">,</span> <span class="token string">'val3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>barn<span class="token punctuation">.</span><span class="token function">smembers</span><span class="token punctuation">(</span><span class="token string">'set'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// ['val1', 'val2', 'val3']</span>
barn<span class="token punctuation">.</span><span class="token function">srem</span><span class="token punctuation">(</span><span class="token string">'set'</span><span class="token punctuation">,</span> <span class="token string">'val3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>barn<span class="token punctuation">.</span><span class="token function">smembers</span><span class="token punctuation">(</span><span class="token string">'set'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// ['val1', 'val2']</span>

Other features of the API include the ability to get ranges with start/end values, getting an array of items, and condensing the entire store of data to save space. The repo has a full reference of all the methods and what they do.

store.js

This is another wrapper, similar to Lockr, but this time provides deeper browser support via fallbacks. The README explains that “store.js uses localStorage when available, and falls back on the userData behavior in IE6 and IE7. No flash to slow down your page load. No cookies to fatten your network requests.”

The basic API is explained in comments in the following code:


1
2
3
4
5
6
7
8
9
10
11
<span class="token comment" spellcheck="true">// Store 'SitePoint' in 'website'</span>
store<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">,</span> <span class="token string">'SitePoint'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// Get 'website'</span>
store<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// Remove 'website'</span>
store<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// Clear all keys</span>
store<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

In addition, there are some more advanced features:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span class="token comment" spellcheck="true">// Store an object literal; uses JSON.stringify under the hood</span>
store<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'SitePoint'</span><span class="token punctuation">,</span>
  loves<span class="token punctuation">:</span> <span class="token string">'CSS'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// Get the stored object; uses JSON.parse under the hood</span>
<span class="token keyword">var</span> website <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>website<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' loves '</span> <span class="token operator">+</span> website<span class="token punctuation">.</span>loves<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// Get all stored values</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// Loop over all stored values</span>
store<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

The README on the GitHub repo has lots of details on depth of browser support and potential bugs and pitfalls to consider (e.g. the fact that some browsers don’t allow local storage in private mode).

lscache

lscache is another localStorage wrapper but with a few extra features. You can use it as a simple localStorage API or you can use the features that emulate Memcached, a memory object caching system.

lscache exposes the following methods, described in the comments in the code:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span class="token comment" spellcheck="true">// set a greeting with a 2 minute expiration</span>
lscache<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'greeting'</span><span class="token punctuation">,</span> <span class="token string">'Hello World!'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// get and display the greeting</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lscache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'greeting'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// remove the greeting</span>
lscache<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'greeting'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// flush the entire cache of items</span>
lscache<span class="token punctuation">.</span><span class="token function">flush</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// flush only expired items</span>
lscache<span class="token punctuation">.</span><span class="token function">flushExpired</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Like the previous library, this one also takes care of serialization, so you can store and retrieve objects:


1
2
3
4
5
6
7
8
lscache<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token string">'name'</span><span class="token punctuation">:</span> <span class="token string">'SitePoint'</span><span class="token punctuation">,</span>
  <span class="token string">'category'</span><span class="token punctuation">:</span> <span class="token string">'CSS'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// retrieve data from the object</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lscache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lscache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>category<span class="token punctuation">)</span><span class="token punctuation">;</span>

And finally, lscache lets you partition data into “buckets”. Take a look at this code:


1
2
3
4
5
6
7
8
lscache<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">,</span> <span class="token string">'SitePoint'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lscache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 'SitePoint'</span>

lscache<span class="token punctuation">.</span><span class="token function">setBucket</span><span class="token punctuation">(</span><span class="token string">'other'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lscache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// null</span>

lscache<span class="token punctuation">.</span><span class="token function">resetBucket</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lscache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'website'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 'SitePoint'</span>

Notice how in the 2nd log, the result is null. This is because I’ve set a custom bucket before logging the result. Once I’ve set a bucket, anything added to lscache before that point will not be accessible, even if I try to flush it. Only the items in the ‘other’ bucket are accessible or flushable. Then when I reset the bucket, I’m able to access my original data again.

secStore.js

secStore.js is a data storage API that adds an optional layer of security by means of the Stanford Javascript Crypto Library. secStore.js lets you choose your storage method: localStorage, sessionStorage, or cookies. To use secStore.js, you have to also include the aforementioned sjcl.js library.

Here is an example demonstrating how to save some data with the encrypt option set to ‘true’:


1
2
3
4
5
6
7
8
9
10
11
12
<span class="token keyword">var</span> storage <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">secStore</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
    encrypt<span class="token punctuation">:</span> <span class="token keyword">true</span><span class="token punctuation">,</span>
      data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token string">'data goes here'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

storage<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>options<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> results<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">throw</span> err<span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Notice the set() method being used, which passes in the options you specify (including the custom data) along with a callback function that lets you test the results. We can then use the get() method to retrieve that data:


1
2
3
4
storage<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>options<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> results<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">throw</span> err<span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>results<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// Logs: "data goes here"</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

If you want to use session storage or cookies instead of local storage with secStore.js, you can define that in the options:


1
2
3
4
5
6
7
<span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
  encrypt<span class="token punctuation">:</span> <span class="token keyword">true</span><span class="token punctuation">,</span>
  storage<span class="token punctuation">:</span> <span class="token string">'session'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// or 'cookies'</span>
  data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token string">'data here'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

localForage

This library, built by Mozilla, gives you a simple localStorage-like API, but uses asynchronous storage via IndexedDB or WebSQL. The API is exactly the same as localStorage (getItem(), setItem(), etc), except its API is asynchronous and the syntax requires callbacks to be used.

So for example, whether you set or get a value, you won’t get a return value but you can deal with the data that’s passed to the callback function, and (optionally) deal with errors:


1
2
3
4
5
6
7
8
9
10
11
localforage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

localforage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'error message...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Some other points on localForage:

  • Supports use of JavaScript promises
  • Like other libraries, not limited just to storing strings but you can set and get objects
  • Lets you set database information using a config() method

Basil.js

Basil.js is described as a unified localStorage, sessionStorage, and cookie API and it includes some unique and very easy to use features. The basic methods can be used as shown here:


1
2
3
4
5
6
basil <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Basil</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>

basil<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
basil<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
basil<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
basil<span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

You can also use Basil.js to test if localStorage if available:


1
basil<span class="token punctuation">.</span><span class="token function">check</span><span class="token punctuation">(</span><span class="token string">'local'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// returns Boolean value</span>

Basil.js also lets you use cookies or sessionStorage:


1
2
3
4
5
6
7
basil<span class="token punctuation">.</span>cookie<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token string">'expireDays'</span><span class="token punctuation">:</span> days<span class="token punctuation">,</span> <span class="token string">'domain'</span><span class="token punctuation">:</span> <span class="token string">'mydomain.com'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
basil<span class="token punctuation">.</span>cookie<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>

basil<span class="token punctuation">.</span>sessionStorage<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
basil<span class="token punctuation">.</span>sessionStorage<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>

Finally, in an options object, you can define the following with an options object:

  • Namespaces for different parts of your data
  • Priority order for which storage method to use
  • The default storage method
  • An expire date for cookies.

1
2
3
4
5
6
options <span class="token operator">=</span> <span class="token punctuation">{</span>
  namespace<span class="token punctuation">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
  storages<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'cookie'</span><span class="token punctuation">,</span> <span class="token string">'local'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  storage<span class="token punctuation">:</span> <span class="token string">'cookie'</span><span class="token punctuation">,</span>
  expireDays<span class="token punctuation">:</span> <span class="token number">31</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

lz-string

The lz-string utility lets you store large amounts of data in localStorage by using compression and it’s pretty straightforward to use. After including the library on your page, you can do the following:


1
2
3
4
5
<span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">'A string to test our compression.'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>string<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 33</span>
<span class="token keyword">var</span> compressed <span class="token operator">=</span> LZString<span class="token punctuation">.</span><span class="token function">compress</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>compressed<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 18</span>
string <span class="token operator">=</span> LZString<span class="token punctuation">.</span><span class="token function">decompress</span><span class="token punctuation">(</span>compressed<span class="token punctuation">)</span><span class="token punctuation">;</span>

Notice the use of the compress() and decompress() methods. The comments in the above code show the length values before and after compression. You can see how beneficial this would be seeing how client side storage always has limited space.

As explained in the library’s docs, there are options to compress data to Uint8Array (a new-ish data type in JavaScript) and even the ability to compress the data for storage outside of the client.

Honorable Mentions

The above tools will probably help you do just about anything you want in localStorage, but if you’re looking for more, here are a few more related tools and libraries you might want to check out.

  • LokiJS – A fast, in-memory document-oriented datastore for node.js, browser, and Cordova.
  • Client Storage for AngularJS – Namespaced client storage for Angular JS. Writes to localStorage, with cookie fallback. No external dependencies other than Angular core; does not depend on ngCookies.
  • AlaSQL.js – JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.
  • angular-locker – A simple and configurable abstraction for local/session storage in angular projects, providing a fluent api that is powerful and easy to use.
  • jsCache – Enables caching of JavaScript files, CSS stylesheets, and images using localStorage.
  • LargeLocalStorage – Overcomes various browser deficiencies to offer a large key-value store on the client.

Know any others?

If you’ve built something on top of the localStorage API or a related tool that enhances client-side storage, feel free to let us know about it in the comments.

Let`s Go

Comments

comments

Categories

+ There are no comments

Add yours