HTML5 Web应用程序中OAuth2的本地存储与cookie

我目前正在试用OAuth2来开发一个完全用JavaScript构建的移动应用程序，该应用程序可以与CakePHP API对话。看看下面的代码，看看我的应用程序目前的样子（请注意，这是一个实验，因此代码混乱，区域缺乏结构等。）

var access_token,
     refresh_token;
var App = {
    init: function() {
        $(document).ready(function(){
            Users.checkAuthenticated();
        });
    }(),
    splash: function() {
        var contentLogin = '<input id="Username" type="text"> <input id="Password" type="password"> <button id="login">Log in</button>';
        $('#app').html(contentLogin);
    },
    home: function() {
        var contentHome = '<h1>Welcome</h1> <a id="logout">Log out</a>';
        $('#app').html(contentHome);
    }
};
var Users = {
    init: function(){
        $(document).ready(function() {
            $('#login').live('click', function(e){
                e.preventDefault();
                Users.login();
            });
            $('#logout').live('click', function(e){
                e.preventDefault();
                Users.logout();
            });
        });
    }(),
    checkAuthenticated: function() {
        access_token = window.localStorage.getItem('access_token');
        if( access_token == null ) {
            App.splash();
        }
        else {
            Users.checkTokenValid(access_token);
        }
    },
    checkTokenValid: function(access_token){
        $.ajax({
            type: 'GET',
            url: 'http://domain.example/api/oauth/userinfo',
            data: {
                access_token: access_token
            },
            dataType: 'jsonp',
            success: function(data) {
                console.log('success');
                if( data.error ) {
                    refresh_token = window.localStorage.getItem('refresh_token');
                     if( refresh_token == null ) {
                         App.splash();
                     } else {
                         Users.refreshToken(refresh_token);
                    }
                } else {
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log('error');
                console.log(a,b,c);
                refresh_token = window.localStorage.getItem('refresh_token');
                 if( refresh_token == null ) {
                     App.splash();
                 } else {
                     Users.refreshToken(refresh_token);
                }
            }
        });
    },
    refreshToken: function(refreshToken){
        $.ajax({
            type: 'GET',
            url: 'http://domain.example/api/oauth/token',
            data: {
                grant_type: 'refresh_token',
                refresh_token: refreshToken,
                client_id: 'NTEzN2FjNzZlYzU4ZGM2'
            },
            dataType: 'jsonp',
            success: function(data) {
                if( data.error ) {
                    alert(data.error);
                } else {
                    window.localStorage.setItem('access_token', data.access_token);
                    window.localStorage.setItem('refresh_token', data.refresh_token);
                    access_token = window.localStorage.getItem('access_token');
                    refresh_token = window.localStorage.getItem('refresh_token');
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log(a,b,c);
            }
        });
    },
    login: function() {
        $.ajax({
            type: 'GET',
            url: 'http://domain.example/api/oauth/token',
            data: {
                grant_type: 'password',
                username: $('#Username').val(),
                password: $('#Password').val(),
                client_id: 'NTEzN2FjNzZlYzU4ZGM2'
            },
            dataType: 'jsonp',
            success: function(data) {
                if( data.error ) {
                    alert(data.error);
                } else {
                    window.localStorage.setItem('access_token', data.access_token);
                    window.localStorage.setItem('refresh_token', data.refresh_token);
                    access_token = window.localStorage.getItem('access_token');
                    refresh_token = window.localStorage.getItem('refresh_token');
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log(a,b,c);
            }
        });
    },
    logout: function() {
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        access_token = window.localStorage.getItem('access_token');
        refresh_token = window.localStorage.getItem('refresh_token');
        App.splash();
    }
};

我有许多与OAuth:的实现有关的问题

1. 显然，将access_token存储在localStorage中是一种糟糕的做法，我应该使用cookie。有人能解释一下原因吗？据我所知，这不再安全或不太安全，因为cookie数据不会被加密。

   根据这个问题：本地存储与Cookies将数据存储在本地存储中，无论如何，它只在客户端可用，并且不像Cookies那样执行任何HTTP请求，所以对我来说似乎更安全，或者至少据我所知，它似乎没有任何问题！**

2. 关于问题1，使用cookie作为过期时间，对我来说同样毫无意义，因为如果你查看代码，就会在应用程序启动时请求获取用户信息，如果在服务器端过期，则会返回错误，并需要refresh_token。因此，不确定客户端和服务器都有到期时间的好处，而服务器才是真正重要的。

3. 在没有a的情况下，我如何获得刷新令牌，将其与原始access_token一起存储以供以后使用，并且B）也存储client_id？我被告知这是一个安全问题，但我以后如何使用这些，但在仅JS的应用程序中保护它们？再次查看上面的代码，了解到目前为止我是如何实现这一点的。