JavaScript text editing webapp Please review this JavaScript text editing webapp. Review the code quality. Give me suggestions to simplify the code.

var textarea = document.getElementById("textarea"),
  statusBar = document.getElementById("status-bar"),
  inputFile = document.getElementById("input-file"),
  appname = "Notepad",
  isModified = false,
  statusBarOn,
  filename;

function changeDocTitle(newFilename) {
  filename = newFilename;
  document.title = filename + " - " + appname;
}

function dontSave() {
  if (!textarea.value || confirm("You have unsaved changes that will be lost.")) {
    isModified = false;
    return true;
  }
}

function newDoc(text, newFilename) {
  if (!isModified || dontSave()) {
    textarea.value = text || "";
    changeDocTitle(newFilename || "untitled.txt");
  }
  if (statusBarOn) updateStatusBar();
  textarea.focus();
}

function openDoc() {
  if (!isModified || dontSave()) inputFile.click();
  textarea.focus();
}

function renameDoc() {
  var newFilename = prompt("Name this document:", filename);
  if (newFilename !== null) {
    if (newFilename === "")
      changeDocTitle("untitled.txt");
    else
      changeDocTitle(newFilename.lastIndexOf(".txt") == -1 ? newFilename + ".txt" : newFilename);
    return true;
  }
}

function saveDoc() {
  if (renameDoc()) {
    var blob = new Blob([textarea.value.replace(/\n/g, "\r\n")], {
      type: "text/plain;charset=utf-8"
    });
    saveAs(blob, filename);
    isModified = false;
  }
  textarea.focus();
}

function updateStatusBar() {
  var text = textarea.value,
    chars = text.length,
    words = text.split(/\b\S+\b/g).length - 1,
    lines = text.split("\n").length;
  statusBar.value = lines + " lines, " + words + " words, " + chars + " characters";
}

function showHideStatusBar(toState) {
  statusBarOn = toState;
  if (statusBarOn) {
    textarea.style.height = "calc(100% - 21px)";
    statusBar.removeAttribute("hidden");
    updateStatusBar();
  } else {
    textarea.style.height = "";
    statusBar.setAttribute("hidden", "");
  }
}

textarea.addEventListener("input", function() {
  isModified = true;
  if (statusBarOn) updateStatusBar();
});

inputFile.addEventListener("change", function() { // load file
  var file = inputFile.files[0],
    reader = new FileReader();
  reader.onload = function() {
    newDoc(reader.result, file.name);
  };
  reader.readAsText(file);
});

document.addEventListener("keydown", function(e) { // shortcuts
  var key = {
    66: function() { // B
      showHideStatusBar(statusBarOn ? false : true); // toggle
    },
    79: openDoc, // O
    82: newDoc, // R
    83: saveDoc, // S
    191: function() { // /
      alert("Welcome to " + appname + "!");
    },
    "noctrl9": function() { // tab
      var sStart = textarea.selectionStart,
        text = textarea.value;
      textarea.value = text.substring(0, sStart) + "\t" + text.substring(textarea.selectionEnd);
      textarea.selectionEnd = sStart + 1;
    }
  }, fn = e.ctrlKey ? key[e.keyCode] : key["noctrl" + e.keyCode];
  if (fn) {
    e.preventDefault();
    fn();
  }
});

onunload = function() { // store localStorage
  if (isModified) {
    localStorage.setItem("text", textarea.value);
    localStorage.setItem("filename", filename);
  } else
    localStorage.removeItem("text");
  localStorage.setItem("statusBarOn", statusBarOn);
};

onload = function() { // load localStorage
  if (localStorage.getItem("text")) {
    newDoc(localStorage.getItem("text"), localStorage.getItem("filename"));
    isModified = true;
  } else
    newDoc();
  if (localStorage.getItem("statusBarOn"))
    showHideStatusBar(JSON.parse(localStorage.getItem("statusBarOn")) ? true : false);
  else
    showHideStatusBar(true); // default
};
First of all, you should declare all of these in it's own scope, not in the global scope. That way, other code (or your own code) won't collide with naming. A simple IIFE would do:

(function(){
  //All code in here
}());

Your code assumes that it will run on modern browsers. But what if your user doesn't use one or can't use one (cough, enterprise, cough)? You code should check if these new APIs like FileReader and Blob exists. Modernizr is a handy library for this.
Likewise, you should also prepare for inconsistent APIs on browsers. addEventListener doesn't exist in older IE browsers. I suggest you use a library like jQuery for this as well as for other operations to normalize the results. It's easier, and you won't be repeating code.
Use libraries to simplify the job. True, libraries can add a bit of baggage to your code, but it shouldn't be an excuse not to use them. jQuery is just 40KB. In contrast, images and backgrounds in websites reach 1MB. How's that for size?
Scale. This code assumes you will only have one editor. What if you wanted more than just one in the near future? What if the app increases to 100k lines of code? Would you dig deep to change element id's and variable names for a second editor?

Or would prefer calling a function, and a set of configs in a few lines of code and create a second one? Something like:

$('#some-element,#another-element').myVeryCoolTextEditor({
  emoji : true,
  someCoolConfig : true,
});


I suggest you take a look at jQuery Boilerplate to easily structure plugins and plugin states. 
Reusablility. A jQuery plugin is not the answer to everything, but I'm just suggesting it for a clean and structured code (Check the comments in the source). You can even go without it, as long as you keep your code reusable and "plugin-like". Think "Drop this script and a one-liner and it just works!"