How to share user settings in 2 browsers

We have a scenario like this:

angular.module('xxx').service('PersistenceService', [ '$rootScope', '$window', function ($rootScope, $window) {
    'use strict';

    function makeKey(key) {
        return $rootScope.session.userName + '_' + $rootScope.session.tenantId + '_' + key;
    }

    this.get = function (key) {
        return $window.localStorage.getItem(makeKey(key));
    };

    this.set = function (key, value) {
        $window.localStorage.setItem(makeKey(key), value);
    };

    this.remove = function (key) {
        $window.localStorage.removeItem(makeKey(key));
    };
}
]);

Currently in our web app, we store the user settings in the Local Storage(js localStorage), the shortage of the local storage is we can't share the settings cross 2 sessions(may be 2 browsers is easy to understand).

Now we want to save the user settings to the server side so user can share his application settings via different browsers.

Here is the question: In our project, the API to interact with local storage is a synchronize design, 1.)if we keep the old interface, and do the sync server logic in each interfaces, the performance is very low. 2.)if we use promise to sync with server, lots of codes need to be changed.

I think neither of above 2 method is acceptable. Currently what i can think of is: Fetch the user settings on app initializing and copy the settings to localStorage, so we can use the old interfaces to without change any code out side of the persistence service. We also need to sync server logic in method(Set, Remove)

Does anyone have any better ideas? Thanks in advance!