刷新後恢復應用程序數據陣列5本地存儲

Question

我有一個數組，我的應用程序依賴於呈現數字和div。我希望通過HTML 5 localStorage API在本地存儲。這是我的JS代碼

var app = { 
slidePreviews: "", 
slideDuration: 7000, 
presentation: { 
    title: "", 
    theme: "themeName", 
    slides: [] 
}, 
themes: [{ 
    name: "white", 
    css: "whitetheme", 
    slideControls: "" 
}, { 
    name: "black", 
    css: "blacktheme", 
    slideControls: "" 
}, { 
    name: "red", 
    css: "redtheme", 
    slideControls: "" 
}, { 
    name: "blue", 
    css: "bluetheme", 
    slideControls: "" 
}, { 
    name: "orange", 
    css: "orangetheme", 
    slideControls: "" 
}, { 
    name: "green", 
    css: "greentheme", 
    slideControls: "" 
}] 
}; 

$(document).ready(function() { 

var saved = false; 

var handlers = { 

    savePresentationData: function(event){ 

     // Place the app object into storage 
     localStorage.setItem("app", JSON.stringify(app)); 

     // Retrieves the object app from HTML 5 local storage 
     var retrievedObject = localStorage.getItem("app"); 

     console.log("retrievedObject: ", JSON.parse(retrievedObject)); 

     var savedData = JSON.parse(retrievedObject); 

     var saved = true; 
     return savedData; 
    }, 

    clearAppData: function(event){ 
     localStorage.clear(); 
     return false; 
    } 

}; 

//use localstorage to restore presentaton data 
if(saved){ 
    app = JSON.parse(retrievedObject); 
} 

我不知道我是否正在做這個權利。它沒有在刷新。刷新時，應用程序對象不包含我以前保存的數據。

ANy suggestions？

Answer 1

您需要一個處理程序來加載您的數據，另一個來保存它。嘗試加載數據，並傳遞一個默認值。如果加載失敗，該函數將返回您設置的默認值：

var app = { .. values .. }, 
handlers = { 
    loadPresentatioData: function (defaults) { 
     /** 
     * Retrieve stored value 
     */ 
     var loaded = localStorage.getItem('app'); 

     /** 
     * Use defaults if no stogare is found 
     */ 
     if (!loaded) { 
      localStorage.setItem('app',JSON.stringify(defaults)); 
      loaded = localStorage.getItem('app'); 
     } 

     /** 
     * Prevent errors if the parsing goes wrong 
     * Defaults to original app value 
     */ 
     try { 
      loaded = JSON.parse(loaded); 
     } 
     catch (e) { 
      loaded = defaults; 
     } 

     return loaded; 
    }, 
    savePresentationData: function (data) { 
     var serialized; 

     try { 
      serialized = JSON.stringify(data); 
      localStorage.setItem('app',serialized); 
     } 
     catch (e) { 
      // Something went wrong 
     } 
    } 
}; 

Answer 2

我認爲你錯了。你不能指望saved變量存在頁面刷新後可以嗎？你必須檢查是否從localStorage的數據null與否並立足於你的代碼：

window.onload = function() { 
    //get data from localStorage 
    var saved = handlers.getPresentationData(); 
    //check if its null/undefined 
    if ([null, undefined].indexOf(saved) === -1) { 
     //its not null/undefined - data exists! 
     console.log("Data exists. Here's the data : ", saved); 
     //set your "app" to data from localStorage 
     app = saved; 

     //Do whatever you want with app - Im choosing to ask for deleting 
     if (confirm("Clear locally Stored data?")) { 
      handlers.clearAppData(); 
     } 

    } else { 
     //data DOES NOT exist in localStorage 
     console.log("Data does not exist, save to localStorage"); 
     //So, save it in localStorage. Refresh this page now. 
     handlers.savePresentationData(); 
    } 

}; 

哦，你需要三個處理器，

• 保存
• 獲取
• 清除

這樣子：

var handlers = { 
    savePresentationData: function() { 
     // Place the app object into storage 
     localStorage.setItem("app", JSON.stringify(app)); 
    }, 
    getPresentationData: function() { 
     // Retrieves the object app from HTML 5 local storage 
     var retrievedObject = localStorage.getItem("app"); 
     var savedData = JSON.parse(retrievedObject); 
     return savedData; 
    }, 
    clearAppData: function (event) { 
     localStorage.clear(); 
     return false; 
    } 
}; 

演示：http://jsbin.com/icafac/1/edit

事情我已經刪除：

• 傳遞event論點處理工作。這是用於true/false
• saved變量現在用於保存數據從localStorage

希望這有助於！