纯前端如何实现一个本地数据库来存取数据？

Question

自己想做一个纯前端的项目（不会后端开发），有数据的录入和展示分析的功能。
用vue开发页面的功能，表单录入数据之后存下来（每天都要去录入），在分析页面显示出来。
最后build打包之后将前端代码放到服务器上。
一开始想用localStorage存取，但是他是存到浏览器上，换个电脑之前数据就没有了。
然后想着js写入txt和读取txt文件的方式来实现一个类似数据库的东西，但好像有兼容性的问题。
纯前端有什么更好的方式去实现吗？

Answer 1

从 Web 应用这个概念来说，没有“纯前端”，就算是纯前端写出来的静态页面要发布出来，也一定需要服务器的。我们通常说的“纯前端”其实是指“纯静态”。

纯静态页面就意味着没有服务端的处理能力，服务器只是单纯的把静态内容发送给浏览器，由浏览器进行处理。既然服务端没有处理能力，那数据就不可能保存在服务端。

但是换个角度，使用所谓的“纯”前端技术，基于 Node 框架是可以实现服务端程序的。这里“纯”加引号，是因为开发语言是可以用 JS/TS，但仍然需要用到数据库。到于数据库算前端还是算后端，这个不好说，如果是 MySQL、SQLServer、PostgreSQL 等数据库服务，那一定是算后端了。但是 SQLite 等文件型、嵌入式的数据库并不太好划分成前端技术还是后端技术。

如果确实不想自己写服务端，也可以借助其他的服务端存储技术，比如网盘。通过存储服务提供的开放 API 是可以实现在浏览器通过前端技术直接把数据存储到第三方服务，再读取的。只不过采用这种方案，需要考虑认证安全性问题，最好是由用户使用自己的 ID 和 Key 来认证，这需要用户去申请相应的账号甚至是开发者账号，对用户要求会比较高。

Answer 2

没有。

纯前端的方式都是存到浏览器上（localStorage、sessionStorage、indexedDB），换个电脑，换个浏览器，清缓存都会导致数据丢失。

你说的写入txt，它可能是用js代码去写的(node)，但他不属于前端

Answer 3

既然是本地存储那就意味着存储的内容不能共享，换台电脑就没了那是必然的，要共享只能存在服务器上

Answer 4

要实现换电脑还有数据那只可能是服务端进行数据存储，纯前端不可能实现

另外写 txt 的方式也不可能，因为纯前端是没有本地文件读写权限的，而且写 txt 也解决不了换电脑数据还在的问题

也就是说如果需要换电脑后数据依然可用，在没有服务端的情况下是不可能的

如果不拘泥换电脑可用这个需求，只要实现把数据存储在本地（避免清空浏览器缓存导致数据丢失）有两个个变通的方法倒是可以试试：
1、数据还存储在 IndexedDB 中，页面增加一个数据导出功能，每次更新后将数据导出并下载到本地，下次使用前先把本地数据导入到 IndexedDB再进行操作。
2、使用 electron之类的框架将部署到服务器的网页打包成一个本地应用，然后使用 sqlite 数据库将数据存储在本地。

Answer 5

使用本地 txt 文件，除了兼容性问题之外，还面临着换电脑的时候需要用户手动迁移文件来迁移其中的数据的问题。
归根结底，只要解决迁移数据的问题，问题就迎刃而解了。
比起迁移文件，用户可能更容易接受另一种方案——让用户复制文本内容，发送给目标电脑，粘贴到指定位置即可：

<template>
  <textarea :value="info" ref="textwrap"></textarea>
  <button @click="copy">复制文本</button>
</template>
<script>
  // ...
  data: () => ({
    info: "这里是需要迁移的数据"
  }),
  methods: {
    copy(){
      if(navigator.clipboard){
        navigator.clipboard.writeText(this.info);
      } else {
        const { textwrap } = this.$refs;
        textwrap.focus();
        document.execCommand("copy");
      }
    }
  }
</script>

剪切板在用户友好程度上是远远优于使用文件迁移的，这里甚至帮用户把复制的快捷键都省了，只需要用户自行粘贴就行了。
当然更人性化的设计还是走后端，哪怕用 OSS 。