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

Question

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

Answer 1

使用本地 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 。

Answer 2

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

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

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

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

Answer 3

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

Answer 4

没有。

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

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

Answer 5

纯前端实现一个本地数据库可以使用IndexedDB，这是一个轻量级的数据库，浏览器提供，无需服务器。

以下是如何使用IndexedDB的一个简单例子：

首先，你需要检查浏览器是否支持IndexedDB。如果支持，创建一个新的数据库，并创建一个对象存储空间：

if (window.indexedDB) {    // 创建数据库    let db = new indexedDB.open("myDatabase", 1);    db.onupgradeneeded = function(e) {        let db = e.target.result;        if (!db.objectStoreNames.contains('myStore')) {            db.createObjectStore('myStore');        }    };    db.onsuccess = function(e) {        let db = e.target.result;        let tx = db.transaction('myStore', 'readwrite');        let store = tx.objectStore('myStore');    };}

然后，你可以使用事务（transaction）来对数据进行增删改查。以下是一个增加数据的例子：

let db = null;let tx = null;let store = null;function addData(name, address) {    db = indexedDB.open("myDatabase", 1);    tx = db.transaction('myStore', 'readwrite');    store = tx.objectStore('myStore');    let request = store.put({name: name, address: address});    request.onsuccess = function(e) {       console.log("Data saved");     }; }

删除数据和查询数据也是类似的方法，只需要将put方法替换为delete或者get即可。例如，以下是删除数据的例子：

function deleteData(name) {    db = indexedDB.open("myDatabase", 1);    tx = db.transaction('myStore', 'readwrite');    store = tx.objectStore('myStore');    let request = store['delete'](name);    request.onsuccess = function(e) {       console.log("Data deleted");     }; }

查询数据：

function fetchData() {    db = indexedDB.open("myDatabase", 1);    tx = db.transaction('myStore', 'readonly');    store = tx.objectStore('myStore');    let getRequest = store.get('name');     getRequest.onsuccess = function(e) {       console.log("DataRetrieved:" + e.target.result);     }; }

以上就是使用IndexedDB实现本地数据库的基本操作，当然实际的操作可能会更复杂，你可能需要对错误进行处理，可能需要处理并发问题等等。但基本的思路都是类似的。希望这个答案对你有所帮助。