无数据库与后端时仅用HTML/JS实现网站评论功能的方法

当然有可行方案，先讲核心前提：纯前端代码跑在浏览器沙箱里，本身没有跨用户公共持久化存储的能力，所以要做所有访问者都能看到的公共评论区，本质都是对接已经把后端逻辑、数据库维护全做好的现成服务，你只需要写HTML/JS嵌入即可，完全不用自己搭服务、管数据库；如果不需要跨用户同步评论，也可以做纯本地运行的评论功能，连外部服务都不用依赖。

具体落地方案 #

• 托管类评论服务直接嵌入
  这类服务是专门给静态网站做评论功能的，后端、数据库、垃圾评论过滤、内容审核这些能力全是现成的，你只需要在自己的HTML页面里留个评论区的容器标签，引入服务提供的前端JS脚本，填上自己的站点标识就能直接用，全程不用碰后端和数据库相关的配置。
  代码结构参考：

  <!-- 评论区挂载的DOM位置 -->
  <div id="comment-wrapper"></div>
  <script>
    // 初始化配置，替换成对应服务给你的站点参数就行
    window.commentInitConfig = {
      siteId: "你的站点专属ID",
      pagePath: location.pathname, // 自动按当前页面路由隔离不同文章的评论
    }
  </script>
  <!-- 引入服务的前端SDK，会自动完成评论区渲染、提交、拉取全流程逻辑 -->
  <script src="对应服务提供的前端SDK地址"></script>
  

• 通用BaaS平台前端直连自定义实现
  如果不想用现成的专门评论服务，也可以选通用的后端即服务（BaaS）平台，在平台后台建好存评论的数据表，配置好读写权限（比如允许所有人读评论、匿名/登录用户可发评论），直接在前端JS里写逻辑调用平台的公开数据接口，自己实现评论提交、拉取、渲染的全流程，同样不需要自己买服务器、搭后端、维护数据库。
  核心逻辑参考：

  // 拉取当前页面的评论列表
  async function loadCommentList() {
    const res = await fetch(`平台数据查询接口?page=${encodeURIComponent(location.pathname)}`);
    const commentList = await res.json();
    renderCommentToDom(commentList); // 自己写DOM拼接逻辑，把评论插到页面对应位置
  }
  // 提交新评论
  async function submitComment(nickname, content) {
    await fetch("平台数据写入接口", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({
        page: location.pathname,
        nickname: nickname,
        content: content,
        createTime: Date.now()
      })
    });
    loadCommentList(); // 提交完成后刷新评论列表
  }
  

• 纯本地存储的演示/个人用评论
  如果你完全不想依赖任何外部服务，只是做功能演示、或者评论只需要存在访问者自己的浏览器里做个人记录，可以直接用浏览器自带的localStorage或者IndexedDB做存储，断网也能正常运行，全程只有前端代码。
  这个方案的缺陷很明显：评论存在每个用户自己的本地浏览器里，A用户发的评论B用户看不到，清空浏览器缓存评论就会直接丢失，根本没法用来做公开站点的公共评论区。
  简单实现参考：

  // 读取当前页面存在本地的评论
  function getLocalComments() {
    return JSON.parse(localStorage.getItem(`local_comments_${location.pathname}`) || '[]');
  }
  // 把新评论存到本地
  function saveCommentToLocal(nickname, content) {
    const list = getLocalComments();
    list.push({nickname, content, time: Date.now()});
    localStorage.setItem(`local_comments_${location.pathname}`, JSON.stringify(list));
    renderCommentToDom(list);
  }
  // 页面加载完成后自动拉取本地评论渲染
  document.addEventListener('DOMContentLoaded', () => {
    renderCommentToDom(getLocalComments());
  })
  

别信所谓“完全零依赖纯前端实现公共评论”的说法，只要是需要跨用户同步的公开评论，就一定有存储数据的地方，你自己不搭后端不维护数据库，本质就是用别人已经搭好的后端和数据库服务，纯靠浏览器本身的能力是做不到公共数据存储的。

内容的提问来源于stack exchange，提问作者jaam