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

Question

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

3

从下面的代码中，我可以在localStorage中设置或存储输入的数据，但是如果我刷新页面，我不确定如何检索和显示相同的数据在视图页面上。我已经尝试使用localStorage.getItem()。每次点击Save按钮时都会显示输入的数据，这很好，也很完美。但是，如果我刷新页面，它就不会显示任何东西，而是重置，我想在我的视图上显示/显示相同的先前保存的数据，即使我刷新页面。请告诉我如何做到这一点？提前致谢！

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.

- Guna

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zivce · Accepted Answer

最终解决方案：链接

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); 
    }
 });