Store

跨浏览器本地存储接口封装，源自 store.js，精简了针对 IE 6/7 的代码。

LocalStorage 只能存储字符串，store.js 在存取的时候会自动 stringify、parse。

存储接口

通过 $.AMUI.store 调用。

检测是否支持（开启） LocalStorage

爱上一匹野马之前，先想想你家有没有草原；使用之前，当然要先检测一下。

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 ...

Safari 的无痕浏览模式或者用户禁用了本地存储时，store.enabled 将返回 false。

浏览器如何禁用 LocalStorage：

Firefox：地址栏输入 about:config, 将 dom.storage.enabled 的值设置为 false；
Chrome: 设置 → 隐私设置 → 内容设置 → 阻止网站设置任何数据。

接口列表

LocalStorage 受同源策略限制，以下操作仅限于同源下的数据。

store.set(key, val): 存储 key 的值为 val；
store.get(key): 获取 key 的值；
store.remove(key): 移除 key 的记录；
store.clear(): 清空存储；
store.getAll(): 返回所有存储；
store.forEach(): 遍历所有存储。

var store = $.AMUI.store;

// 存储 'username' 的值为 'marcus'
store.set('username', 'marcus')

// 获取 'username'
store.get('username')

// 移除 'username' 字段
store.remove('username')

// 清除所有本地存储
store.clear()

// 存储对象 - 自动调用 JSON.stringify
store.set('user', { name: 'marcus', likes: 'javascript' })

// 获取存储的对象 - 自动执行 JSON.parse
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

// 从所有存储中获取值
store.getAll().user.name == 'marcus'

// 遍历所有存储
store.forEach(function(key, val) {
  console.log(key, '==', val)
})

浏览器支持

绝大多数浏览器（包括 IE 8）都原生支持 LocalStorage。

你的浏览器测试结果为：

不同浏览器对本地存储单条记录的长度限定不同，具体可以通过以下链接测试：

注意事项

原生方法与 store.js 的差异

使用原生方法操作：

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 + "!") // 仍然返回对象

store.set('tags', ['javascript', 'localStorage', 'store.js'])
alert("We've got " + store.get('tags').length + " tags here") // 仍然返回数组

自动过期实现

LocalStorage 并没有提供过期时间接口，只能通过存储时间做比对实现。

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

JS 插件

目录