Edit in JSFiddle

var txtFile = null;
var txtFileName = 'data.txt';
var txtEdit = document.getElementById( 'txtEdit' );

var btLoadTxtFile = document.getElementById( 'btLoadTxtFile' );
var btSaveTxtFile = document.getElementById( 'btSaveTxtFile' ); 

//---

btLoadTxtFile.addEventListener( 'change', btLoadTxtFileHandler, false );
btSaveTxtFile.addEventListener( 'click', btSaveTxtFileHandler, false );

function btLoadTxtFileHandler( e ) {

	loadTxtFile( e, loadTxtFileCompleteHandler );

};

function btSaveTxtFileHandler( e ) {

  this.download = txtFileName;
	this.href = createTxtFile( getContent() );

};

//---

function loadTxtFile( e, callback ) {

    var input = e.target;
    var reader = new FileReader();
    
    reader.onload = function () {
        
        callback( this.result );
        
    };

    reader.readAsText( input.files[ 0 ] );
    
    txtFileName = input.files[ 0 ].name;
    
};

function loadTxtFileCompleteHandler( result ) {

  setContent( result );
        
};

//---

function createTxtFile( str ) {

  var file = new Blob( [ str ], { type: 'text/plain' } );

  if ( txtFile !== null ) {

    window.URL.revokeObjectURL( txtFile );

  }

  txtFile = window.URL.createObjectURL( file );

  return txtFile;
    
};

//---

function setContent( str ) {

  txtEdit.value = str;

};

function getContent() {

  return txtEdit.value.replace( /\n/g, '\r\n' );

};
<div class="content borderimg">

<div class="wrapper">

  
  <input id="btLoadTxtFile" type="file" accept="text/plain"/><label for="btLoadTxtFile" class="fontStyle inputFile">LOAD TXT FILE</label>
  <a download="data.txt" id="btSaveTxtFile" class="fontStyle">SAVE TXT FILE</a>
  <br/><br/>
  <textarea id="txtEdit" class="fontStyle" cols="50" rows="12" placeholder="TXT DATA"></textarea>
  
</div>

</div>
@import url(//fonts.googleapis.com/css?family=Share+Tech+Mono);

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

/*https://stackoverflow.com/questions/572768/styling-an-input-type-file-button*/
input[type="file"] {
    display: none;
}

.inputFile {
  margin: 2px 2px 2px 2px;
	-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
	box-shadow: inset 0px -3px 7px 0px #29bbff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25));
	background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -o-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: linear-gradient(to bottom, #000e25 5%, #000e25 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0);
	background-color: #000e25;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #46b8f1;
	display: inline-block;
	font-size: 15px;
	padding: 9px 23px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #263666;
  cursor: pointer;
}

.inputFile:active {
	position:relative;
	top:1px;
}

#btSaveTxtFile {
  margin: 2px 2px 2px 2px;
	-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
	box-shadow: inset 0px -3px 7px 0px #29bbff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25));
	background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -o-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: linear-gradient(to bottom, #000e25 5%, #000e25 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0);
	background-color: #000e25;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #46b8f1;
	display: inline-block;
	font-size: 15px;
	padding: 9px 23px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #263666;
  cursor: pointer;
}
#btSaveTxtFile:active {
	position:relative;
	top:1px;
}

textarea {
  margin: 2px 2px 2px 2px;
	-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
	box-shadow: inset 0px -3px 7px 0px #29bbff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25));
	background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -o-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: linear-gradient(to bottom, #000e25 5%, #000e25 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0);
	background-color: #000e25;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #46b8f1;
	display: inline-block;
	color: #ffffff;
	font-size: 15px;
	padding: 9px 9px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #263666;
  width:80%;
  text-align: left;
}

.borderimg {
  border: 106px solid transparent;
  padding: 0px;
  -webkit-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Safari 3.1-5 */
  -o-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Opera 11-12.1 */
  border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round;
}

.wrapper {
  margin-top: -75px;
  margin-left: -75px;
  margin-right: -75px;
}

.content {
	width: 50%;
  height: 50%;
  max-width: 480px;
	background-color: #000e25;
	position:absolute;
  left:0; right:0;
  top:0; bottom:0;
	margin:auto;
  text-align: center;
}

.fontStyle {
  color: #46b7f1;
  font-family: 'Share Tech Mono', monospace;
}