localStorage保存HTML克隆

我想使用localStorage來保存包含HTML克隆的對象。localStorage保存HTML克隆

var myObject["test"] = document.getElementByID("someElement").cloneNode(true); 
myObject["test2"] = document.getElementByID("someOtherElement").cloneNode(true); 
localStorage.saveObject = JSON.stringify(myObject);

但是Object saveObject仍然等於{}。看來，stringify不能將HTML節點串聯起來，如果以任何方式解決問題以保存它，是否可以將此對象解析回HTML節點？

有人知道解決方案嗎？

來源

2013-07-19 Loki

您的節點引用將從字符串化對象中刪除，因爲根據定義，JSON不能包含函數或節點引用 - 僅限於基元或子數組/對象。換句話說，您無法繼續參考本地存儲中的節點。您將需要通過ID，班級或其他方式記錄對它們的引用。

[編輯，響應OP的評論]

JSON和JS對象是不一樣的東西。前者來源於後者，但它們並不相同。 JSON是一種存儲手段，因此不能包含任何動態引用。 HTML元素不會永久存在;它們作爲運行時（DOM）概念存在，一旦頁面離開，它們就會消失。因此，它們不能以任何有意義的方式存儲。

因此，JSON只能存儲原始數據 - 字符串，數字和布爾值 - 以及允許它嵌套的結構 - 數組和子JSON定義。

那麼當你在對象上運行stringify會發生什麼情況是不合適的部分被剝離。在你的情況下，這是兩個屬性。相反，您需要以更持久，可修改的格式（通過ID或類別或其他提醒機制）存儲對元素的引用。

var obj = {el1: '#some_element', el2: '.some_other_element'}; 
localStorage.saveObject = JSON.stringify(obj);

那裏我保存我的兩個元素作爲他們的ID（第一）和類（第二）的引用。

然後，當您重新加載本地存儲時，可以根據這些因素查找元素，例如將它們提供給jQuery選擇器。

來源

2013-07-19 10:04:59 Utkanos

你能不能舉個例子？我真的不明白它:( – Loki

那麼這似乎是一個相當不錯的方式，但：我想要存儲的HTML節點實際上不在同一頁上，我想要使用它們。子頁面www.mypage.com/subpage，其中很多html節點都與「some_other_element」類相關，我想通過Button選擇其中的一些（並通過Button）並保存它們的HTML代碼以在主頁上顯示相同的代碼www.mypage.com。如果我關閉網站並重新加載它，它應該在localStorage中搜索存儲的HTML元素並將它們重新加載到主頁面上。 – Loki

一個解決辦法是：

得到你想要克隆的節點的outerHTML
商店outerHTML（串）在本地存儲。
載入時創建一個新元素，將其附加到文檔中。
將保存在localstorage中的outerHTML分配給新元素。

簡單的例子：

window.saveArray = new Array(); 
var clone = document.getElementByID("someElement").cloneNode(true); 
saveArray.push(clone.outerHTML); 

function save(){ 
    localStorage["elements"] = JSON.stringify(saveArray); 
} 
function load(){ 
    var tempsave = JSON.parse(localStorage["elements"]); 

    for (var i = 0; i < tempsave.length; i++){  
     var element = document.createElement('div'); 
     document.getElementById('element-container').appendChild(element); 
     element.outerHTML = tempsave[i];  
    } 
}

來源

2016-03-23 06:43:40

localStorage保存HTML克隆

回答

相關問題