Store

Store exposes a simple API for cross browser local storage. Via store.js, and codes for IE 6/7 are removed.

LocalStorage can only store strings. store.js will automatically stringify and parse when store and load the data.

Store Interface

Call store interface through $.AMUI.store.

Check Support

Check whether browser support LocalStorage(or whether it is enabled).

var store = $.AMUI.store;

if (!store.enabled) {
  alert('Local storage is not supported by your browser. Please disable "Private Mode", or upgrade to a modern browser.');
  return;
}

var user = store.get('user');
// ... and so on ...

store.enabled will return false when using private mode in Safari or localstore is disabled.

How to disable LocalStorage in browser:

Firefox： Enter about:config as url. Then set dom.storage.enabled to false;
Chrome: Setting → Privacy → Content Setting → Block sites from setting any data..s

Interfaces

LocalStorage is limited by Same Origin Policy, so the following operation is only avaliable for data from same origin.

store.set(key, val): Store key, val pair;
store.get(key): Get the value of key;
store.remove(key): Delete record with key;
store.clear(): Clear storage;
store.getAll(): Return all records;
store.forEach(): Apply to all records;

var store = $.AMUI.store;

// Store 'marcus' as the value of 'username'.
store.set('username', 'marcus')

// Get 'username'.
store.get('username')

// Remove 'username'.
store.remove('username')

// Clear the storage.
store.clear()

// Store an object - Use JSON.stringify.
store.set('user', { name: 'marcus', likes: 'javascript' })

// Get an object - Use JSON.parse.
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

// Get username from all records.
store.getAll().user.name == 'marcus'

// Apply function to all records.
store.forEach(function(key, val) {
  console.log(key, '==', val)
})

Support

Most of the browsers including IE 8 provide native support toLocalStorage。

Your browser:

Different browsers have different maximum length of single record. This can be tested with following tests:

Attention

Difference between original localstorage and store.js

Original localstorage:

localStorage.myage = 24
localStorage.myage !== 24 // true
localStorage.myage === '24' // true

localStorage.user = { name: 'marcus', likes: 'javascript' }
localStorage.user === "[object Object]" // true

localStorage.tags = ['javascript', 'localStorage', 'store.js']
localStorage.tags.length === 32 // true
localStorage.tags === "javascript,localStorage,store.js" // true

store.js:

store.set('myage', 24)
store.get('myage') === 24 // true

store.set('user', { name: 'marcus', likes: 'javascript' })
alert("Hi my name is " + store.get('user').name + "!") // Object

store.set('tags', ['javascript', 'localStorage', 'store.js'])
alert("We've got " + store.get('tags').length + " tags here") // Array

Timeout

LocalStorage doesn't have timeout interface, but we can achieve the same effect by comparing current time with stored time.

var store = $.AMUI.store;

var storeWithExpiration = {
  set: function(key, val, exp) {
    store.set(key, {val:val, exp:exp, time:new Date().getTime()});
  },

  get: function(key) {
    var info = store.get(key)
    if (!info) {
      return null;
    }

    if (new Date().getTime() - info.time > info.exp) {
      return null;
    }

    return info.val
  }
}；

storeWithExpiration.set('foo', 'bar', 1000);

setTimeout(function() {
  console.log(storeWithExpiration.get('foo'));
}, 500) // -> "bar"

setTimeout(function() {
  console.log(storeWithExpiration.get('foo'));
}, 1500) // -> null

Amaze UI 2.4

JavaScript

TOC