答案 0 :(得分:1)
您需要将信息发送到您的服务器,您的服务器必须修改服务器文件系统上的实际文件。当您加载网页时,浏览器会向您的服务器发出请求并要求提供该文件。每次重新加载时,它都会再次询问,服务器会提供该文件的新副本。必须在服务器上的源处修改该文件。
从你的问题来看,说你有很多学习要做可能是安全的,但也许这个例子可以让你开始。
首先,您需要客户端的代码将数据发送到您的服务器:
$(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只是谷歌Chrome的JavaScript引擎(名为V8),在服务器而不是浏览器中运行。浏览器中的JavaScript可以访问客户端API,该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();
})
}
});
答案 1 :(得分:0)
确实没有太多信息可以继续,但你也可以使用localstorage,在页面加载后读取值,并设置文本/值。
http://www.webdesignerdepot.com/2013/04/how-to-use-local-storage-for-javascript/
但就个人而言,除非有特殊要求,否则我会选择Chev的想法。
答案 2 :(得分:0)
如果你想使用HTML5本地存储,那就足够了,而不是简单。
window.localStorage.setItem("name", value);
window.localStorage.getItem("name");
参见JsFiddle示例here。