如何使localStorage數據在頁面間持久存在？

我正在構建一個粘滯便箋頁。我想保存創建的筆記。數據將以localStorage()保存，這會使數據在頁面重新加載時保持不變，但不會在瀏覽其他頁面時保留。從另一個頁面返回時，如何使筆記仍然保存？如何使localStorage數據在頁面間持久存在？

var notes, count = 0; 

function saveNotes() { 
    var notesArray = []; 
    notes.find("li > div").each(function (i, e) { 
     var title = $(e).find("input.note-title"); 
     var content = $(e).find("textarea.note-content"); 

     notesArray.push({ Index: i, Title: title.val(), Content: content.val() }); 
    }); 

    var jsonStr = JSON.stringify(notesArray); 

    localStorage.setItem("notes", jsonStr); 
} 

function addNoteEvent(noteElement) { 
    var div = noteElement.children("div"); 
    var closeIcon = div.find("i"); 

    div.focus(function() { 
     closeIcon.removeClass("hidden"); 
    }); 

    div.hover(function() { 
     closeIcon.removeClass("hidden"); 
    }, function() { 
     closeIcon.addClass("hidden"); 
     saveNotes(); 
    }) 
} 

function addNewNote(className, title, content) { 

    notes.append("<li><div class='col-md-3 portfolio-item img'>" + 
        "<input class='note-title' placeholder='Untitled'/>" + 
        "<i class='fa fa-trash-o hidden'></i>" + 
        "<textarea class='note-content' placeholder='Your content here'/>" + 
       "</div></li>"); 

    var newNote = notes.find("li:last"); 
    newNote.find("i").click(function() { 
     newNote.remove(); 
     saveNotes(); 
    }); 

    addNoteEvent(newNote); 


    if (title) { 
     newNote.find("input.note-title").val(title); 
    } 
    if (content) { 
     newNote.find("textarea.note-content").val(content); 
    } 
    saveNotes(); 
} 

function loadNotes() { 
    var storedNotes = localStorage.getItem("notes"); 
    if (storedNotes) { 
     var notesArray = JSON.parse(storedNotes); 
     count = notesArray.length; 

     var i; 
     for (i = 0; i < count; i++) { 
      var storedNote = notesArray[i]; 
      addNewNote(storedNote.Class, storedNote.Title, storedNote.Content); 
     } 
    } 
} 

$(document).ready(function() { 
    notes = $("#notities .container > .row"); 

    loadNotes(); 
    $(".btnNew").click(function() { 
     addNewNote(); 
    }); 

    if (count === 0) { 
     $(".btnNew").click(); 
    } 
});

來源

2014-01-10 user2911184

當您嘗試從另一個頁面訪問localStorage數據時，您會得到什麼？ – dcodesmith

你是否在每個頁面調用'saveNotes（）'？數據應該保留，除非你覆蓋它或完全清除'localStorage'。也許你需要重新思考你的'setItem'鍵的命名約定。 – sbeliv01

只有存儲數據的頁面才能訪問它。因此，通過瀏覽其他頁面，根據定義，您可以訪問本地存儲。不過，「返回」到同一頁面應該可以工作。 –

localStorage橫跨在同一個域中頁執着。正常的同源規則適用於DOM storage，所以只要您的頁面位於同一個域中，數據就可以訪問。

來源

2014-01-10 20:52:37 josh3736

我的數據只保存在頁面重新加載，當我去到同一個域中的另一個頁面，並返回筆記（數據）不見了 – user2911184

這是不正確的行爲。數據應該保留。你確定其他頁面是不是意外清除本地存儲或覆蓋'筆記'鍵？ – josh3736

我已經發布了我的代碼 – user2911184

如何使localStorage數據在頁面間持久存在？

回答

相關問題