即使在重新加载后，如何在博客上保存 post 数据？

Question

我正在尝试创建博客，但没有成功。我希望博客拥有它，这样它就可以保存博客中的帖子，这样每次我重新加载它时网站上仍然有相同的帖子（题外话问题：当你进入例如堆栈溢出时，它如何自动创建一个提交时该问题的页面？）。但无论如何，当我重新加载我的网站时，它会重置页面并且所有帖子都丢失了！目前，我的代码是这样的：

1: script.js, 2: blog.html

function add_question() {
    let title = prompt('Enter a title');
    let paragraph = prompt('Enter a paragraph');

    let question_area = document.getElementById('question area');
    let questionTag = document.createElement('span');
    let titleTag = document.createElement('h2');
    titleTag.innerText = title;
    let pTag = document.createElement('pre');
    pTag.innerText = paragraph;

    [titleTag,pTag].forEach((tag) => {tag.style.textAlign = 'center'; questionTag.appendChild(tag)})
    questionTag.style.border = '5px black solid';
    questionTag.style.display = 'inline-block';
    question_area.append(document.createElement('br'),document.createElement('br'),document.createElement('br'))
    question_area.appendChild(questionTag)
}

<!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
        <script src='script.js'></script>
    </head>
    <body>
        <h1 style='text-align: center;'>My Blog</h1>
        <button onclick=add_question()>New Post</button>
        <br><br><br>
        <div id='question area'>
            <div style='border: 7px black dashed;display:inline-block;align-self: center;'>
                <h2 style='text-align: center;'>Welcome!</h2>
                <pre style='text-align: center;'>This is where all my blog posts are!</pre>
            </div>
        </div>
    </body>
</html>

那么我需要做什么来解决这个问题？

Answer 1

您可以使用 HTML5 本地存储（通过 .localStorage() 访问）或会话存储，更多 here

您可能会将表单数据字符串化并执行

localStorage.setItem("key", "value")

或者，通过 javascript 在浏览器上，您可以将表单数据保存在 cookie 中，并从中读取，但不建议这样做。

但是，这只是为了存储表单数据。为了您的目的（博客），您需要一些服务器端架构来存储、检索和处理数据。

即使在重新加载后，如何在博客上保存 post 数据？

How do you save your post data on your blog even after reloading?

html

javascript

serverless