Question

我很难清楚地写出我的问题，所以让我来描述一下我在做什么。

我正在构建一个：

的Web应用程序

拥有托管在子域(https://api.example.com)
主要应用程序托管在tld (https://www.example.com)
tld没有任何数据库访问权限，而是与API交互以处理数据
tld通过OAuth通过api进行身份验证，并在会话中存储访问令牌和访问令牌机密
- 会话结束时，不再使用访问令牌，从而将用户注销

我在tld中有一条路线（让我们称之为/ajax来解决此问题）javascript调用（GET，PUT，POST或者{{1 }}向api发出请求。这样，任何人都不必看到访问令牌，访问令牌秘密，消费者密钥或消费者秘密。

我看到它的方式，访问令牌和访问令牌秘密实际上是我需要存储在会话中的唯一东西，因为我可以使用API获取其他所有东西，但不是每次都为每一块都拨打电话我需要的数据，我认为有些事情应该持续存在，比如用户的个人资料，布局偏好等方面。

我完成此任务的最佳方式是什么？本地存储？饼干？我应该废弃它并将其存储在会话中吗？

如果你有时间，那么建立我可能不知道的网站有哪些其他最佳做法？

Answer 1

我说的是你走的正确轨道，但主要是用JavaScript存储你的数据。并在适当时将其与本地存储耦合。

当我构建您正在描述的应用程序之类的应用程序时，我通常会注意设置通过API接收的数据的JavaScript表示。

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

假设您定义了api对象来处理API调用，并在完成时调用回调。
API返回的数据是JSON，只能分配给JavaScript变量
返回的JSON是一个对象列表，每个对象都有一个“id”字段。
你有某种事件对象，我通常构建自己的自定义事件，基本上将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对象，该对象首先检测客户端是否实际支持localstorage，如果是，则镜像本地存储中的_data字段。这对于在会话之间快速保持常用数据非常方便。使用现成的JSON解析工具将数据从JSON转换为LocalStorage“text”并返回。

请记住，您不能依赖LocalStorage作为您的主要数据结构，您无法保证客户端支持它，甚至当它确实实际存储的数据的上限在浏览器之间是不同的。因此，使用它来存储以下数据：

您经常需要访问
您觉得应该在用户登录后立即就在那里，
并且不会经常更改以保证不断刷新API调用。

Answer 2

恭喜！你已经回答了大部分问题。如果要保留用户数据，则需要使用本地存储或cookie等内容。在您的情况下，本地存储是最好的。使用cookie，每个页面请求都会在标头中发送到cookie。

最好的运气与您的应用程序。

Javascript Web App最佳实践

2 个答案: