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

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

V 友们能帮忙想想有啥好的办法没,如果有合适的方案,小红包送你
1626 次点击
所在节点    程序员
25 条回复
lanlanye
2023-07-26 22:29:15 +08:00
你这个静态……指的是浏览器打开本机文件?还是要放在服务器上?
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 能支持贴代码呢

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

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

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

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

© 2021 V2EX