不懂就问，静态网页管理动态数据如何实现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 487 天前的主题，其中的信息可能已经有所发展或是发生改变。

需求：
1·用浏览器就能打开的，国产麒麟+Linux+Windows 通用
2·最好不建立 web 监听端口或者服务之类的，也不需要数据库
3·能够简单地管理一些数据，比如这次打开 index.html 录入一条数据，下次打开还能读取到这条数据
4·数据存在 index.html 同目录下即可，存储方式不限
5·如果必须要建立监听后者服务等，启动浏览器时启动，关闭浏览器时监听也关闭

V 友们能帮忙想想有啥好的办法没，如果有合适的方案，小红包送你

浏览器

数据

时监听

打开

25 条回复 • 2023-07-28 09:16:12 +08:00

lanlanye

2023-07-26 22:29:15 +08:00 via iPhone

你这个静态……指的是浏览器打开本机文件？还是要放在服务器上？

looking0truth

2023-07-26 22:43:50 +08:00

Chrome 支持读写本地文件

QingquanBaby

2023-07-26 22:44:52 +08:00

@lanlanye 本机文件，类似于绿色版的软件（这个软件是网页）

hamsterbase

2023-07-26 22:49:11 +08:00

1. 访问 https://vscode.dev/

2. 打开本地文件夹

3. 编辑文本，可以直接保存在硬盘。

hamsterbase

2023-07-26 22:50:46 +08:00

如果你写的是 markdown ，可以在 vs code 里实时预览。
如果你写的是 html ，可以另外开一个窗口，打开这个 html 。

flyqie

2023-07-26 22:52:05 +08:00

没记错的话，纯本地 index.html 打开即用且数据保存到同目录下没法做。

x77

2023-07-26 22:54:57 +08:00

1-4：很多 Web 框架支持数据存储，有的甚至支持本地数据库，数据仅存储于客户端（浏览器）本地，与服务器没无关
5：没有监听，启动浏览器就读取/加载数据。用户操作浏览器（清理缓存）可以删除数据

参考实例（该页面暂不支持移动端）： https://ai.xinlake.dev
这个页面的设置存储就是 Flutter 框架支持的本地数据库及数据存储。

QingquanBaby

2023-07-26 22:57:43 +08:00

@hamsterbase 不联网可以实现吗

hamsterbase

2023-07-26 23:06:32 +08:00

@QingquanBaby 这个不太清楚，可以网上搜搜看有没有现成的。

chihiro2014

2023-07-26 23:11:26 +08:00

sqlite?

placeholder

2023-07-27 08:15:24 +08:00

数据你简单说说是啥数据，key:value 这种直接存 locale storage 不行吗？

复杂一点的数据、文件看看 indexedDB 呢，也是本地存储，我看 edge 、firefox 、chrome 都支持。这仨浏览器基本覆盖你说的三个系统了吧。

不过这种保存方式保证不了持久化就是了，客户卸载浏览器或者清除浏览器缓存就没了

QingquanBaby

2023-07-27 09:18:04 +08:00

@placeholder 这种方式可以将数据做导入导出吗，可以的话就不用管浏览器缓存之类的了

QingquanBaby

2023-07-27 09:19:26 +08:00

@chihiro2014 sqlite 对数据的存取很好用，但是需要搞一个监听，这个监听我暂时还没想到可控的办法

QingquanBaby

2023-07-27 09:23:49 +08:00

@placeholder 感觉可行，正在看

macy

2023-07-27 09:53:39 +08:00

chrome 存在 indexdb 里面，就行，只要别卸载浏览器或者手动把 indexdb 的数据库删除掉，数据都在

isSamle

2023-07-27 10:56:06 +08:00

本地数据库可以实现吧，sql.js 读写本地 db 文件试下

isSamle

2023-07-27 11:01:39 +08:00

我之前 Vue-Electron 研究了一段时间的本地存储，可以参考下我这个项目[GhostWriter]( https://github.com/MarkSamle/GhostWriter)，理论上来讲，应该可以在本地保存一个 db 文件，然后通过相关方法读写，配合 sql.js 写一个本地数据库操作的 js 文件用来实现类似 api 的功能应该就行了

liuhai233

2023-07-27 12:32:17 +08:00

你这个做个 electron 就行吧

lujiaxing

2023-07-27 13:39:40 +08:00

有没有听说过有一个东西叫 localstorage ?

```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="Content-Type" content="text/html;charset=utf-8">
<title>Local Storage Test</title>
<script language="javascript" type="text/javascript">
function writeLocalStorage(text) {

localStorage.setItem("test", text);
}

function loadLocalStorage() {
return localStorage.getItem("test");
}

function save() {
var targetControl = document.getElementById("valueInput");
writeLocalStorage(targetControl.value);
}

function init() {
var targetControl = document.getElementById("valueInput");
var value = loadLocalStorage();

targetControl.value = value;
}

</script>
<style type="text/css">
.demo-area {
width: 640px;
height: 480px;
text-align: center;
position: absolute;
left: calc(50% - 320px);
top: calc(50% - 240px);
background-color: #0000FF11;
border-radius: 5px;
font-size: 14pt;
}
</style>
</head>
<body onload="init()">
<div class="demo-area">
<br /><br /><br /><br />
<br /><br /><br /><br />
<span>
<label for="valueInput">值: </label>
<input type="text" value="" id="valueInput" name="valueInput" />
</span>
<br /><br />
<button onclick="save()">保存</button>
</div>
</body>
</html>
```

lujiaxing

2023-07-27 13:44:56 +08:00

md 什么时候 V2EX 能支持贴代码呢

QingquanBaby

2023-07-27 14:51:00 +08:00

@lujiaxing 保存后的数据能否导出呢，有一个需求是比如我保存了一些值，需要在其他电脑上看（不能联网传输）

lujiaxing

2023-07-27 15:05:52 +08:00

@QingquanBaby 可以. 你把数据按逗号跟换行符分割, 保存成 csv 文件然后转为 blob 链接给用户下载 (或自动触发链接点击事件弹出下载) 就行, 导出的文件 EXCEL 都能打开.

placeholder

2023-07-27 16:31:50 +08:00

@QingquanBaby 做不到后台静默导入导出，导出我想到的就是造个文件然后通过浏览器下载到本地，导入也得手动选择文件上传，

导出你可以看看 file saver 这个 npm 包，导入不知道，我没做过

lujiaxing

2023-07-27 21:09:58 +08:00

@placeholder 静默导出不太可能. 毕竟浏览器不可能背着用户写硬盘, 更何况程序自以为是保存的地方可能根本不是用户找得到的. 不过导出成 blob url 直接下载不是什么难事儿.

```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="Content-Type" content="text/html;charset=utf-8">
<title>Local Storage Test</title>
<script language="javascript" type="text/javascript">
......
......
......

function exportContent(){
var targetControl = document.getElementById("valueInput");
var encoder = new TextEncoder();
var encodedValue = encoder.encode(targetControl.value);

var blob = new Blob([encodedValue], { type: "application/octet-stream" });

var ancher = document.createElement("a");
ancher.target = "_blank";
ancher.download = (Math.random() + "").replace('.', '') + ".txt";
ancher.href = URL.createObjectURL(blob);
ancher.click();
}

</script>
<style type="text/css">
......
......
......
</head>
<body onload="init()">
<div class="demo-area">
......
......
......
<button onclick="save()">保存</button>
 
<button onclick="exportContent()">导出</button>
</div>
</body>
</html>
```

点导出就可以下载输入框里的文件.
所有支持 HTML 5 都可以.
不支持 HTML 5 的浏览器最多就是下载的文件变成了 GUID 没有后缀名罢了.

placeholder

2023-07-28 09:16:12 +08:00

@lujiaxing 学习了