如何保存使用Javascript/jQuery在瀏覽器（DOM）上修改的html

首先讓我澄清一下，我正在嘗試做的只是本地使用，用戶將直接訪問html頁面。如何保存使用Javascript/jQuery在瀏覽器（DOM）上修改的html

我想要做的是基本上追加並保存文本到HTML文件。

這就是我所擁有的。

HTML（的index.html）

<div id="receiver"></div> 
<button id="insertButton">Insert</button>

$(document).ready(function() { 
    $('#insertButton').click(function(){ 

     $('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>'); 
    }) 
});

我不知道的是如何將追加後的文件（index.html的）保存。任何想法如何做到這一點？這甚至可以使用JavaScript或jQuery？

來源

2014-11-01 fs_tigre

您需要將編輯後的文件保存在服務器上？你只能用javascript才能做到這一點 - 你需要一個服務器端語言。 – 2014-11-01 13:47:04

你可以給id爲 tag 然後在附加內容後你可以得到html ...你將無法在服務器上保存（如果你正在執行，因爲它正在執行在客戶端機器上），你可以使用這樣的東西.. http://stackoverflow.com/questions/4439296/save-or-download-javascript-string-as-a-file ..在我看來.. 也保存在服務器上或使用PHP下載後，只需在附加內容後，您可以使ajax調用服務器的PHP頁面...希望它可以幫助... – Ahmad 2014-11-01 13:48:02

不，這不會被託管在服務器中。僅限本地驅動器。 – 2014-11-01 13:54:55

-1

不需要任何JavaScript。添加html後，只需按Ctrl + S即可在本地保存文件用修改html。

來源

2014-11-01 13:44:13

afaik它會保存加載的內容不是動態添加的內容...正確如果我錯了... – Ahmad 2014-11-01 13:45:03

我不喜歡這種方法是事實，你需要指定名稱和位置，每次保存（ CTRL + S）。謝謝 – 2014-11-01 13:50:33

如果我的理解正確，您需要在本地計算機上進行臨時使用，那麼您可以將它存儲在Cookie中。因此，無論何時加載頁面，檢查cookie是否可用，如果是，則從cookie加載數據或加載新數據。除非和直到cookie未被清除，否則您可以使用此數據。

希望這有助於...

來源

2014-11-01 14:23:46 pravid

你可以改變你的處理程序要做到這一點：

$(document).ready(function() { 
    $('#insertButton').click(function(){ 

     $('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>'); 

     // Save the page's HTML to a file that is automatically downloaded. 

     // We make a Blob that contains the data to download. 
     var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" }); 
     var URL = window.webkitURL || window.URL; 

     // This is the URL that will download the data. 
     var downloadUrl = URL.createObjectURL(file); 

     var a = document.createElement("a"); 
     // This sets the file name. 
     a.download = "source.htm"; 
     a.href = downloadUrl; 

     // Actually perform the download. 
     document.body.appendChild(a); 
     a.click(); 
     document.body.removeChild(a); 
    }) 
});

你應該看看兼容性列表和文件的URL了在MDN。值得注意的是，URL不適用於IE 9或更早版本。 Blob一樣。

來源

2014-11-01 15:05:43 Louis

它在Chrome中工作。有沒有一種方法可以指定URL的下載位置，並最終用新的URL覆蓋現有的URL？謝謝 – 2014-11-01 18:47:36

「在哪裏下載」。你是指在文件系統中它將被保存的位置？最好我們可以用'download'屬性來建議一個文件名。最終，瀏覽器根據默認配置或提示用戶決定將其保存在何處。瀏覽器決定在覆蓋的情況下會發生什麼。否則這將是一個安全漏洞。「這是一個很好的小文件，可以下載爲'〜/ .login'。」（如果你不熟悉* nix，那麼允許這樣的下載會很糟糕。） – Louis 2014-11-01 18:55:50

好吧，顯然，由於合理的限制（安全性），Javascript並不是我想要完成的任務的正確技術。我想修改和保存文件，就像它是一個在線或桌面應用程序一樣。我會研究一些其他的選擇。非常感謝你的幫助。 – 2014-11-02 14:33:45

如何保存使用Javascript/jQuery在瀏覽器（DOM）上修改的html

回答

相關問題