如何將元素轉換爲可從localStorage存儲和恢復的字符串

Question

我的計劃是將我的元素存儲在localStorage中，一旦它們被讀取一次（對於在線應用程序 - 我認爲如果我可以將它工作會顯着加快我的應用程序）。所以我想出了以下內容，但內容似乎要麼被存儲，要麼返回爲空。現在我認爲一個元素基本上是一個字符串，所以我不需要對它進行任何操作來將它存儲在localStorage中，但顯然不是。有誰知道是否有可能實現我想要的？

如果你想把它用於旋轉，那麼你需要一個小文件來保存html傳遞給它。內容並不重要。第一次運行if (content)將評估爲false。下一次是真實的，我添加了.clear()使其交替。 ShowSource函數將第三次填充id=localor元素（它將需要與id=content元素或您選擇填充的任何其他元素分開），顯示「從文件」後的空值。

function showSource(source) { //Function and related element only here for testing 
    $("#localor").html("<p>"+source+"</p>"); 
} 

//local is the name of the localStorage element 
//id is the id of the element in the main form 
//source is where the content for the element originates. 
    function loadElement(local, id, source) { 

//This is the generic script for attempts to load an element. 

     content = localStorage.getItem(local); //Try to load from local storage 
    if (content) {//If found 
     $(id).html(content); 
     showSource("from Local " + content); //Added only for testing 
     localStorage.clear(); //Added only for testing 
     //load into the #content element 
    } else {//Not found 
     $(id).load(source); 
     showSource("from File " + content); //Added only for testing 
     //so load it from the server.. 
     localStorage.setItem(local,$(id).html()); 
     //then save it to the local storage, so we don't have to do this again any time soon. 
    } 
} 


$(document).ready(function() { 
    loadElement("login.1001", "#content", "login.html"); 
}); 

請幫忙。

謝謝。

Answer 1

你正在做的事情不起作用的原因是你在加載之前保存該項目。 load異步工作，就像所有（合理的）ajax調用一樣。當您撥打load時，過程開始，但稍後結束。然後你的代碼繼續並抓住它認爲是內容並保存它的內容，但內容還沒有。

使用，而不是回調：

$(id).load(source, function() { 
    showSource("from File " + content); //Added only for testing 
    //so load it from the server.. 
    localStorage.setItem(local,$(id).html()); 
    //then save it to the local storage, so we don't have to do this again any time soon. 
}); 

---

但是......你不只是重新發明瀏覽器緩存？