WEEX H5 Render 解读（10）之storage类

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的方法和属性。而且改变了调用方式，有以前的同步调用，变为现在的异步调用。