How to use asynchronous method in a synchronous method

Ok, LocalStorage is quiet good, but if you want to store a lot of data, i suggest you to take a look about PouchDB, which is a JavaScript implementation of CouchDB, a NoSQL database.

Pouchdb use IndexedDB as its storage mechanism. So, PouchDB runs in the browser, which provides speed.

I think that can be really helpful in your case :).

If you have time take a look about this piece of code that i've made :

Database Class

var Database = (function(){

    var instance = undefined;

    function Database(){
      //Create new database Game
      this.db = new PouchDB('Game');

      //Listen for db changes, and fired show function
      this.db.changes({
        since: 'now',
        live: true
      }).on('change', this.show);

    }

    //Show function retrieve all docs, and add it to the html
    Database.prototype.show = function(){
      this.db
      .allDocs({include_docs: true, descending: true})
      .then(function(response){
        var data = response.rows;
        var preview = document.querySelector('.preview');
        while (preview.firstChild) {
            preview.removeChild(preview.firstChild);
        }
        data.forEach(function(elm){
          var p = document.createElement('p');
          p.innerHTML = elm.doc.title;
          preview.appendChild(p);
        });
      });
    }


    //Add a doc to our database
    Database.prototype.add = function(data){
      this.db
      .post(data)
      .then(function(response){
        console.log('Data added !');
      }).catch(function(err){
        console.log(err);
      });
    }

    //Clean our database
    Database.prototype.reset = function(){
      var db = this.db;
      //retrieve all docs
      db.allDocs({include_docs:true, descending: true})
        .then(function(response){
          var rows = response.rows;
          var docs = rows.map(function(elm){
            return elm.doc;
          });
          //Create promises array
          var promises = docs.map(function(elm){
            //Return promise remove
            return db.remove(elm._id, elm._rev);
          });
          //Resolve all promisein our array
          Promise.all(promises).then(function(data){
            console.log('Database Cleaned !');
          });
        });
    }

    return {
      get: function(){
        if (!instance){
          instance = new Database();
        }
        return instance;
      }
    }

  })();

Do some action

  //Create a database
  var DB = Database.get();

  function add(){
    var value = document.querySelector('#value').value;

    var obj = {
      title: value
    };
    //Add obj to our database
    DB.add(obj);
  }

  function reset(){
    //Reset our database
    DB.reset();
  }

HTML

<input type="text" name="name" id="value">
<button type="button" name="button" onclick="add()">add</button>
<button type="button" name="button" onclick="reset()">Destory database</button>
<div class="preview">
</div>

I think that PouchDB is a really good stuff, if you have time, fell free to test it :)

Is there is any way that make these method synchronous

No. Asynchronous methods are asynchronous because they are well, asynchronous. You cannot make something that is going to happen tomorrow (or 100ms from now) instead happen now.

What you really want is a way to write asynchronous code in such a way that it sort of looks like synchronous code. That will be both more readable, and in your case, will make adapting your code easier.

We want to somehow be able to write

A() . then(B);

as

A();
B();

and have it mean the same thing: to wait for A to finish before executing B. If a variable or result is involved, then we want to be able to write

A() . then(function(a) { return B(a+1); })

as

var a = A();
B(a+1);

Async functions

It turns out there is a way to do this: async functions. This feature is by no means available in all environments, but it's easy enough to find ways to access it. To use an async function, I put the keyword async in front of the function, then use the special keyword await. So the code above becomes just:

async function foo() {
  var a = await A();
  await B(a+1);
}

To get this to work, transpile your code with Babel, selecting the options for enabling async functions. Babel will translate your code into ES5, the kind of JavaScript all browsers know how to interpret.

The above code will actually return a promise that you can either hang a then from, or use in another async function:

async function bar() {
  await foo();
}

In your specific case:

async function write(contents) {
  await storage.setContents('docKey', contents);
  alert('doc created/updated');
}

Generators

There is another approach you might like to know about. It uses "generators", which are a special type of function in ES6 which "return" a value, but maintain their state, and can be called again and return more values after doing stuff in between. Generators are written like this, with an * after the function name:

function* foo() {
  yield 1;
  yield 2;
}

This function is called in a special way. First, you call it as foo() to make a thing called an iterator, and then you use the next method of the iterator to get the next value. (There are also other ways to retrieve the sequence of values, which we won't go into here.)

These generators can be used to write the kind of "asynchronous-but-looks-synchronous" code you want, as follows:

function* foo() {
  var a = yield A();
  yield B(a+1);
}

The code looks quite similar to the async function, but with yield replacing await.

But in this case, unlike the async functions described above, we need someone or something to ask for the first value, then wait for the promise returned by yield to resolve, then ask for the second value, and so on. The code do do so is not long, but is a bit complex. There are many libraries and utilities which do exactly that. For instance, a well-known one is called co. With co, you can write code which behaves identically to the async function I showed earlier as follows:

var foo = co.wrap(function* foo() {
  var a = yield A();
  yield B(a+1);
});

One reason for adopting this approach would be that generators are standard in ES6 and more widely available than async functions, which are being considered for ES7.