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

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

V 友们能帮忙想想有啥好的办法没,如果有合适的方案,小红包送你
1360 次点击
所在节点    程序员
25 条回复
lanlanye
287 天前
你这个静态……指的是浏览器打开本机文件?还是要放在服务器上?
looking0truth
287 天前
Chrome 支持读写本地文件
QingquanBaby
287 天前
@lanlanye 本机文件,类似于绿色版的软件(这个软件是网页)
hamsterbase
287 天前
1. 访问 https://vscode.dev/

2. 打开本地文件夹

3. 编辑文本, 可以直接保存在硬盘。
hamsterbase
287 天前
如果你写的是 markdown ,可以在 vs code 里实时预览。
如果你写的是 html ,可以另外开一个窗口,打开这个 html 。
flyqie
287 天前
没记错的话,纯本地 index.html 打开即用且数据保存到同目录下没法做。
x77
287 天前
1-4:很多 Web 框架支持数据存储,有的甚至支持本地数据库,数据仅存储于客户端(浏览器)本地,与服务器没无关
5:没有监听,启动浏览器就读取/加载数据。用户操作浏览器(清理缓存)可以删除数据

参考实例(该页面暂不支持移动端): https://ai.xinlake.dev
这个页面的设置存储就是 Flutter 框架支持的本地数据库及数据存储。
QingquanBaby
287 天前
@hamsterbase 不联网可以实现吗
hamsterbase
287 天前
@QingquanBaby 这个不太清楚 ,可以网上搜搜看有没有现成的。
chihiro2014
287 天前
sqlite?
placeholder
287 天前
数据你简单说说是啥数据,key:value 这种直接存 locale storage 不行吗?

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

不过这种保存方式保证不了持久化就是了,客户卸载浏览器或者清除浏览器缓存就没了
QingquanBaby
287 天前
@placeholder 这种方式可以将数据做导入导出吗,可以的话就不用管浏览器缓存之类的了
QingquanBaby
287 天前
@chihiro2014 sqlite 对数据的存取很好用,但是需要搞一个监听,这个监听我暂时还没想到可控的办法
QingquanBaby
287 天前
@placeholder 感觉可行,正在看
macy
287 天前
chrome 存在 indexdb 里面,就行,只要别卸载浏览器或者手动把 indexdb 的数据库删除掉,数据都在
isSamle
287 天前
本地数据库可以实现吧,sql.js 读写本地 db 文件试下
isSamle
287 天前
我之前 Vue-Electron 研究了一段时间的本地存储,可以参考下我这个项目[GhostWriter]( https://github.com/MarkSamle/GhostWriter),理论上来讲,应该可以在本地保存一个 db 文件,然后通过相关方法读写,配合 sql.js 写一个本地数据库操作的 js 文件用来实现类似 api 的功能应该就行了
liuhai233
287 天前
你这个做个 electron 就行吧
lujiaxing
287 天前
有没有听说过有一个东西叫 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
287 天前
md 什么时候 V2EX 能支持贴代码呢

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

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

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

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

© 2021 V2EX