我很难简洁明了地写下我的问题，所以让我描述一下我正在处理的问题。

我正在构建一个网络应用程序:

• 有自己的 API 托管在子域 (https://api.example.com)
• 在顶级域名 (https://www.example.com)
上托管了主要应用程序
• 顶级域名没有任何数据库访问权限，而是与 API 交互以处理数据
• tld 通过 OAuth 使用 api 进行身份验证，并将访问 token 和访问 token secret 存储在 session 中
  • 当 session 结束时，不再使用访问 token ，从而将用户注销

我在 tld 中有一个路由(对于这个问题我们称它为 /ajax)javascript 调用(GET, PUT, POST，或 DELETE) 向 api 发出请求。这样，任何人都不必看到访问 token 、访问 token secret 、消费者 key 或消费者 secret 。

在我看来，访问 token 和访问 token secret 实际上是我需要在 session 中存储的唯一内容，因为我可以使用 API 获取其他所有内容，而不是每次都为每个片段进行调用我需要的数据，我认为应该保留一些东西，比如用户个人资料、布局偏好等方面。

完成此任务的最佳方法是什么？本地存储？ cookies ？我应该废弃它并将其存储在 session 中吗？

如果您有时间，还有哪些其他我可能不知道的构建此类网站的最佳实践？

最佳答案

我会说你走在正确的轨道上，但主要将数据存储在 JavaScript 中。并在合适的时候将其与本地存储相结合。

当我构建诸如您所描述的应用程序时，我通常会注意设置通过 API 接收的数据的 JavaScript 表示形式。

一个这样的表示可能如下所示。请记住，我下面的示例代码做了几个假设。

1. 它假设您定义了一个 api 对象，该对象负责 API 调用，并在完成时调用回调。
2. API 返回的数据是 JSON，可以简单地分配给 JavaScript 变量，
3. 返回的 JSON 是一个对象列表，每个对象都有一个“id”字段。
4. 如果你有某种事件对象，我通常会构建自己的自定义事件，这些事件基本上将 function 对象作为监听器，当触发时通过监听器并调用带有或不带有效载荷的函数关于情况。

数据容器示例:

MYAPP.data.BaseContainer = function (api_url, loadedEvent) {
    var self = {

        // Array to store the data returned via the APIs 
        _data : [],

        // The API URL used to fetch data
        api_url : api_url,

        // Boolean flag to signify whether the _data variable has been populated
        is_loaded : false,

        // The even to fire once _data has been populated
        loadedEvent : loadedEvent,

        /**
         * Returns the state of the is_loaded variable
         */
        loaded : function () {
            return self.is_loaded;
        },

        /**
         * Takes an ID and returns any member of the _data array
         * that has that ID.
         * 
         * @param id : an String or integer representing the ID.
         * @returns {Object}
         */
        byId : function (id) {
            var toReturn = null;
            for (var i = 0, len = self._data.length; i < len; i++) {
                if (self._data[i].id == id) {
                    toReturn = self._data[i];
                    break;
                }
            }

            return toReturn; 
        },

        /**
         * Returns the entire _data array.
         */
        all : function () {
            return self._data;
        },

        /**
         * This simple callback just stores the json response in 
         * its entirety on the _data variable.
         */
        callback : function(data) {
            self._data = data;
            self.is_loaded = true;
            loadedEvent.fire(self._data);
        },

        /**
         * Calls the API, if no callback has been specified as a parameter
         * self.callback is used.
         */
        getFromAPI : function(callback) {
            if (typeof callback === 'undefined') {
                callback = self.callback;
            }

            api.get(self.api_url, callback);
        }
    };

    self.getFromAPI();

    return self;
};

有了这个蓝图，我现在可以像这样创建特定的数据容器:

/**
 * Stores a list of "friends" gotten from the API.
 * This is basically an instance of the BaseContainer object defined above.
 */
MYAPP.data.Friends = (function () {
    var self = MYAPP.data.BaseContainer("API_URL_TO_FECTH_FRIENDS_LIST", FriendsLoadedEvent);

    return {
        byId : self.byId,
        all : self.all,
        loaded : self.loaded
    };
}());

只要运行此代码，就会进行 API 调用，完成后将触发 FriendsLoadedEvent。所以，说白了，我通常使用 JavaScript 来存储我的东西。但是，如果您想将 LocalStorage 加入其中，那也很容易!

只需在BaseContainer对象中添加本地存储代码，首先检测客户端是否真正支持本地存储，如果支持则在本地存储中镜像_data字段。这对于保持经常使用的数据在 session 之间快速可用非常方便。使用现成的 JSON 解析工具将数据从 JSON 转换为 LocalStorage“文本”并返回。

请记住，您不能依赖 LocalStorage 作为您的主要数据结构，您无法保证客户端支持它，即使它达到了上限，您实际可以存储的数据量在浏览器之间也是不同的.所以用它来存储数据:

• 您希望经常访问，
• 您认为应该在用户登录后立即出现，
• 而且这种变化的频率不足以保证不断刷新 API 调用。

关于Javascript Web 应用最佳实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9314840/