如何使用javascript或jQuery在html视图页面中显示LocalStorage数据？

Question

From the below code, I can able to set or store my entered data in localStorage , but I am not sure how can I retrieve and display the same data in the view page if I do refreshing the page. I have tried with localStorage.getItem() . The entered data is showing on clicking of Save button each time, that's fine and perfect. But if I refresh the page then it is not showing anything, it is resetting, I want to show/display the same eariler Saved data even if I refresh the page also on my view. Please let me know how to do this ? Thanks in advance !

html:

<button class = "btn btn-primary" data-toggle = "modal" data-target = "#myModal">
   Click
</button>

<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>
   </div>

</div>

js:

$(saveBtn).click(function(){
    var noteContent = $(content).val();
    var outputarea = $(output);
       var info = [{ "content":"Doe" }];
       $.each(info, function() {
        i=0;
        info[i].content = noteContent;
        outputarea.append('<br>content:' + info[i].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[i].content',info[i].content);
    //localStorage.getItem(info[i].content);
        i++;
        function recallNote(){
            $(content).val(info[i].content); 
        }
    });

});

Fiddle availale.

Answer 1

Final solution: link

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 />');

    localStorage.setItem('info['+(info.length-1)+'].content',info[(info.length-1)].content);


    function recallNote(){
        $(content).val(info[info.length-1].content); 
    }
 });