JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button class = "btn btn-primary" data-toggle = "modal" data-target = "#myModal">
   Click
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
        <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
         </div>
         <div class = "modal-body">
			<textarea id="content"></textarea>
				<br /><br/>
				<button id="saveBtn">Save</button>
			<div id="output" style="overflow: auto; height: 75px; width: 450px;">
			</div>
        </div>
		<div class = "modal-footer">
           <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
          </button> 
        </div>
        </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

JavaScript

var info = [];

function allStorage(arr) {
        keys = Object.keys(localStorage);
        //console.log(keys);
        i = keys.length;

    while ( i-- ) {
        arr.push( { content : localStorage.getItem(keys[i])} );
    }
}

allStorage(info);
console.log(info);

var outputarea = $(output);

info.forEach((val)=>{
	outputarea.append('<br>content:' + val.content + '<hr />');
	})
	
	$(saveBtn).click(function(){
	    var noteContent = $(content).val();
	    
	    
	    var obj = {content : noteContent};
	    
	        info.push(obj);
	        console.log(info);
	  outputarea.append('<br>content:' + info[(info.length-1)].content + '<hr />');
	    //it is appending the data to "outputarea" on clicking of Save button,
	    //but I want to show same data even if I refresh the page also(from localStorage) 
	    //- how to do this  
	   
	   localStorage.setItem('info['+(info.length-1)+'].content',info[(info.length-1)].content);
	    //localStorage.getItem(info[i].content);
	  
	        function recallNote(){
	            $(content).val(info[info.length-1].content); 
	        }
	});