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

Question

从下面的代码，我可以set or store 我在localStorage 中输入的数据，但我不确定如果我刷新页面，如何在视图页面中检索和显示相同的数据。我试过localStorage.getItem()。输入的数据每次点击Save按钮时都会显示出来，很好很完美。但是，如果我刷新页面，那么它不会显示任何内容，它正在重置，我想show/display the same eariler Saved data 即使我也在我的视图中刷新页面。请让我知道该怎么做？提前致谢！

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 可用。

Answer 1

最终解决方案：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); 
    }
 });