当我在网站上运行时，我如何构建我的应用程序以使用localStorage，当我作为chrome应用程序运行时，如何构建c

解决此问题的方法是创建您自己的存储API。您已经发现localStorage是同步的，而Chrome存储是异步的，但这是一个很容易解决的问题，只需将所有内容视为异步即可。

创建您自己的API，然后使用它来代替所有其他调用。代码中的快速查找/替换可以用新的API替换localStorage调用。

function LocalStorageAsync() {
     /**
      * Parses a boolean from a string, or the boolean if an actual boolean argument is passed in.
      *
      * @param {String|Boolean} bool A string representation of a boolean value
      * @return {Boolean} Returns a boolean value, if the string can be parsed as a bool.
      */
    function parseBool(bool) {
        if (typeof bool !== 'string' && typeof bool !== 'boolean')
            throw new Error('bool is not of type boolean or string');
        if (typeof bool == 'boolean') return bool;
        return bool === 'true' ? true : false;
    }
    /**
     * store the key value pair and fire the callback function.
     */
    this.setItem = function(key, value, callback) {
        if(chrome && chrome.storage) {
            chrome.storage.local.set({key: key, value: value}, callback);
        } else {
            var type = typeof value;
            var serializedValue = value;
            if(type === 'object') {
                serializedValue = JSON.stringify(value);
            }
            value = type + '::typeOf::' + serializedValue;
            window.localStorage.setItem(key, value);
            callback();
        }
    }
    /**
     * Get the item from storage and fire the callback.
     */
    this.getItem = function(key, callback) {
        if(chrome && chrome.storage) {
            chrome.storage.local.get(key, callback);
        } else {
            var stronglyTypedValue = window.localStorage.getItem(key);
            var type = stronglyTypedValue.split('::typeOf::')[0];
            var valueAsString = stronglyTypedValue.split('::typeOf::')[1];
            var value;
            if(type === 'object') {
                value = JSON.parse(valueAsString);
            } else if(type === 'boolean') {
                value = parseBool(valueAsString);
            } else if(type === 'number') {
                value = parseFloat(valueAsString);
            } else if(type === 'string') {
                value = valueAsString;
            }
            callback(value);
        }
    }
}

// usage example
l = new LocalStorageAsync();
l.setItem('test',[1,2,3], function() {console.log('test');});
l.getItem('test', function(e) { console.log(e);});

下面的解决方案除了将所有内容都视为异步之外，还克服了一个问题，即localStorage将所有内容转换为字符串。通过将类型信息保留为元数据，我们可以确保getItem操作产生的数据类型与进入的数据类型相同

更重要的是，使用工厂模式的变体，您可以创建两个具体的内部子类，并根据环境返回适当的子类：

function LocalStorageAsync() {
    var private = {};
    private.LocalStorage = function() {
        function parseBool(bool) {
            if (typeof bool !== 'string' && typeof bool !== 'boolean')
                throw new Error('bool is not of type boolean or string');
            if (typeof bool == 'boolean') return bool;
                return bool === 'true' ? true : false;
        }
        this.setItem = function(key, value, callback) { /* localStorage impl... */ };
        this.getItem = function(key, callback) { /* ... */ };
    };
    private.ChromeStorage = function() {
        this.setItem = function(key, value, callback) { /* chrome.storage impl... */ };
        this.getItem = function(key, callback) { /* ... */ };
    }
    if(chrome && chrome.storage)
        return new private.ChromeStorage();
    else
        return new private.LocalStorage();
};

这是我最终得到的代码，它对我想做的事情很有效。

这不是真正的异步代码，尤其是在Storage API中的ChromeStorage.set（）方法中，我没有使用回调。理想情况下，您希望使用回调来进行一些错误处理。

localStorage或chrome.storage

首先，决定是使用localStorage还是chrome.storage的代码。变量被附加到窗口中，以便全局可用。

  if !!window.chrome and chrome.storage
    window.storageType = ChromeStorage
  else
    window.storageType = LocalStorage

存储API

接下来，存储API，它使用了Coffeescript中的"Class"。目前还没有完全抽象化。我还有一些代码要处理从localStorage到chrome.storage的迁移。localStorage类是伪异步的。

class LocalStorage
  # Gets a generic value from localStorage given a particular key
  # Parses the JSON so it's an object instead of a string
  @get: (key, callback) ->
    value = localStorage.getItem(key)
    value = JSON.parse(value)
    callback(value)

  # Synchronously gets the stuff from localStorage
  @getSync: (key) ->
    value = localStorage.getItem(key)
    JSON.parse(value)

  # Sets something to localStorage given a key and value
  @set: (key, value) ->
    value = JSON.stringify(value)
    localStorage.setItem(key, value)

  # Removes something from localStorage given a key
  @remove: (key) ->
    localStorage.removeItem(key)

class ChromeStorage
  # Return all the tasks given the key
  # At the moment the key is 'todo' for most calls
  @get: (key, callback) ->
    chrome.storage.sync.get key, (value) ->
      value = value[key] || null || LocalStorage.getSync(key)
      callback(value) 

  # Set all the tasks given the key 'todo' and the thing we're setting 
  # Usually a JSON array of all the tasks
  @set: (key, value, callback) ->
    params = {}
    params[key] = value
    chrome.storage.sync.set params, () ->

  # Remove a whole entry from chrome.storage.sync given its key
  @remove: (key) ->
    chrome.storage.sync.remove key, () ->

  # Listen for changes and run Views.showTasks when a change happens
  if !!window.chrome and chrome.storage
    chrome.storage.onChanged.addListener (changes, namespace) ->
      for key of changes
        if key == DB.db_key
          storageChange = changes[key]
          Views.showTasks(storageChange.newValue)

用法示例

最后，这里是我如何在代码中使用Storage API的示例。此方法保存一个新任务。DB.DB_key是一个变量，表示要在存储中使用的密钥。

  # Sets a new task
  # Receives name which is in the input
  @setNewTask: (name) ->
    # Only do this stuff if the input isn't blank
    unless name == ''
      # Sends the task to @createTask() to make a new task
      newTask = @createTask(name)
      # Get all the tasks
      window.storageType.get DB.db_key, (allTasks) ->
        # Adds that new task to the end of the array
        allTasks.push newTask
        # Save all the tasks
        window.storageType.set(DB.db_key, allTasks)
        # Show the tasks
        Views.showTasks(allTasks)

GitHub存储库位于此处：https://github.com/humphreybc/super-simple-tasks