weex 0.7.0 新增了storage模块，今天我们来读一下storage类的源码。
贴出storage.js全部代码，为了没有更新的小伙伴。
/* global localStorage */
'use strict'
const supportLocalStorage = typeof localStorage !== 'undefined'
const logger = require('../logger')
const SUCCESS = 'success'
const FAILED = 'failed'
const INVALID_PARAM = 'invalid_param'
const UNDEFINED = 'undefined'
const storage = {
/**
* When passed a key name and value, will add that key to the storage,
* or update that key's value if it already exists.
* @param {string} key
* @param {string} value
* @param {function} callbackId
*/
setItem: function (key, value, callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
if (!key || !value) {
sender.performCallback(callbackId, {
result: 'failed',
data: INVALID_PARAM
})
return
}
try {
localStorage.setItem(key, value)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
}
catch (e) {
// accept any exception thrown during a storage attempt as a quota error
sender.performCallback(callbackId, {
result: FAILED,
data: UNDEFINED
})
}
},
/**
* When passed a key name, will return that key's value.
* @param {string} key
* @param {function} callbackId
*/
getItem: function (key, callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
if (!key) {
sender.performCallback(callbackId, {
result: FAILED,
data: INVALID_PARAM
})
return
}
const val = localStorage.getItem(key)
sender.performCallback(callbackId, {
result: val ? SUCCESS : FAILED,
data: val || UNDEFINED
})
},
/**
*When passed a key name, will remove that key from the storage.
* @param {string} key
* @param {function} callbackId
*/
removeItem: function (key, callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
if (!key) {
sender.performCallback(callbackId, {
result: FAILED,
data: INVALID_PARAM
})
return
}
localStorage.removeItem(key)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
},
/**
* Returns an integer representing the number of data items stored in the Storage object.
* @param {function} callbackId
*/
length: function (callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
const len = localStorage.length
sender.performCallback(callbackId, {
result: SUCCESS,
data: len
})
},
/**
* Returns an array that contains all keys stored in Storage object.
* @param {function} callbackId
*/
getAllKeys: function (callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
const _arr = []
for (let i = 0; i < localStorage.length; i++) {
_arr.push(localStorage.key(i))
}
sender.performCallback(callbackId, {
result: SUCCESS,
data: _arr
})
}
}
storage._meta = {
storage: [{
name: 'setItem',
args: ['string', 'string', 'function']
}, {
name: 'getItem',
args: ['string', 'function']
}, {
name: 'removeItem',
args: ['string', 'function']
}, {
name: 'length',
args: ['function']
}, {
name: 'getAllKeys',
args: ['function']
}]
}
module.exports = storage
1. 总体有所不同
我们可以看到整体与以往的模块定义不同了，这次是直接采用了对象定义方法。即：
const storage={
setItem: function (key, value, callbackId) {}
,getItem: function (key, callbackId) {}
,removeItem: function (key, callbackId) {}
,length:function (callbackId) {}
,getAllKeys: function (callbackId) {}
}
我是比较推崇这种写法的，我认为这种写法是“一切皆对象”最好的阐释。可能创作者也认可这种风格的写法。
2.setItem
- 1.判断浏览器是否支持
if (!supportLocalStorage) { logger.error('your browser is not support localStorage yet.') return }
- 2.判断是否缺少参数
if (!key || !value) {
sender.performCallback(callbackId, {
result: 'failed',
data: INVALID_PARAM
})
return
}
如果缺少参数则返回INVALID_PARAM。
可以看到返回的数据是一个对象，包含result和data字段。
- 3.利用try-catch捕捉执行的错误
try {
localStorage.setItem(key, value)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
}
catch (e) {
// accept any exception thrown during a storage attempt as a quota error
sender.performCallback(callbackId, {
result: FAILED,
data: UNDEFINED
})
}
我们可以看到无论执行出错还是执行成功，data均返回UNDEFINED。
3.getItem
const val = localStorage.getItem(key)
sender.performCallback(callbackId, {
result: val ? SUCCESS : FAILED,
data: val || UNDEFINED
})
我们可以看到这个方法调用了localStorage.getItem方法，并对返回的结构做了简单的封装。
4.removeItem
localStorage.removeItem(key)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
我们可以看到 调用了localStorage.removeItem方法。
5.length
const len = localStorage.length;sender.performCallback(callbackId, { result: SUCCESS, data: len })
仅仅调用了localStorage.length的值。
6.getAllKeys
const _arr = []
for (let i = 0; i < localStorage.length; i++) {
_arr.push(localStorage.key(i))
}
循环调用了localStorage.key(i)获取所有localStorage的键。
weex官方，storage类在h5实现上，主要使用了浏览器的localstorage对象，从封装的效果上看，阉割了localstorage的方法和属性。而且改变了调用方式，有以前的同步调用，变为现在的异步调用。