您需要將信息發送到您的服務器和你的服務器將不得不修改實際文件在服務器的文件系統上。當您加載網頁時，瀏覽器會向您的服務器發出請求並要求提供該文件。每次重新加載時，它都會再次提問，並且服務器提供該文件的全新副本。該文件必須在源服務器上進行修改。
從你的問題來看，可能很安全的說你有很多學習要做，但也許這個例子會讓你開始。
首先，你需要的代碼在客戶端發送的數據備份到服務器：
$(function() {
$('#button').click(function() {
var toAdd = $('textarea[name=input]').val();
$.ajax({
url: '/some/endpoint/on/your/server',
method: 'POST',
data: { htmlToAppend: toAdd },
});
});
});
使用jQuery來做出POST request到您的服務器，並與請求一起發送toAdd元素。
接下來您的服務器需要編碼以接受POST請求並修改HTML文件的來源。以下代碼是在Node.js平臺上運行的所有JavaScript。 Node.js只是Google Chrome的JavaScript引擎（名爲V8），而不是在瀏覽器中運行。瀏覽器中的JavaScript可以訪問客戶端API，使其可以控制當時加載到瀏覽器中的HTML，這是通過將<div>附加到頁面上所做的。節點中的JavaScript可以訪問服務器端API，使其可以在服務器上執行操作。
如果你不知道node.js不用擔心，這只是一個例子來演示你在服務器端需要的東西。任何服務器端語言/技術將在這裏工作，它只是需要進行類似的行動，這一點：
// Think of these require calls like <script src=""></script>
// references in node. The "http", "fs", and "querystring"
// modules are both modules built into node.js.
var http = require('http');
var fs = require('fs'); // fs stands for File System.
var qs = require('querystring');
// You can get tons of modules from the community
// using the npm registry. Cheerio is one of them.
// I did "npm install cheerio" from the root of my project.
// Cheerio is basically JQuery that you can use on the
// server to manipulate an HTML file.
var cheerio = require('cheerio');
// Create an http server to listen for requests.
http.createServer(function (request, response) {
// If the request was made to the root of our site, serve our
// html file.
if (request.url === '/') {
// Read html file from hard drive.
var htmlFile = fs.readFileSync('./path/to/html/file.html');
// Respond to the user with a 200 status code telling the
// browser that the request was successful.
response.writeHead(200);
// Write the html file's contents to the response stream.
response.write(htmlFile, 'binary');
// Close the response stream.
response.end();
}
else if (request.url.toLowerCase() === '/some/endpoint/on/your/server') {
// Declare a variable to build our request body.
var requestBody = '';
// Whenever the request stream receives data, append
// it to requestBody.
request.on('data', function (data) {
requestBody += data;
});
// When the request is finally complete, run our code to
// modify the actual HTML file.
request.on('end', function() {
// Use the querystring module to parse the requestBody
// into a JavaScript object similar to the one we passed
// to JQuery's ajax method on the client-side.
var post = qs.parse(requestBody);
// Read the contents of our HTML file into memory.
var htmlFile = fs.readFileSync('./path/to/html/file.html');
// Load the html file into Cheerio so we can manipulate it
// jquery style :)
var $ = cheerio.load(htmlFile);
// Append the htmlToAppend from the request body to the
// bottom of the .list element.
$('.list').append(post.htmlToAppend);
// Render the HTML document out of Cheerio and into a string.
var newHtmlFile = $.html();
// Write the modified document back to the hard drive.
fs.writeFileSync('./path/to/html/file.html', newHtmlFile);
// End the response so the user's browser doesn't hang waiting
// waiting for a response from the server. Ideally you'd send
// down some data that your client-side jquery can use to
// display a friendly message to the user.
response.end();
})
}
});