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

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

V 友们能帮忙想想有啥好的办法没,如果有合适的方案,小红包送你
1627 次点击
所在节点    程序员
25 条回复
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>
&nbsp;
<button onclick="exportContent()">导出</button>
</div>
</body>
</html>
```

点导出就可以下载输入框里的文件.
所有支持 HTML 5 都可以.
不支持 HTML 5 的浏览器最多就是下载的文件变成了 GUID 没有后缀名罢了.
placeholder
2023-07-28 09:16:12 +08:00
@lujiaxing 学习了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/960025

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX