1
lanlanye 2023-07-26 22:29:15 +08:00 via iPhone
你这个静态……指的是浏览器打开本机文件?还是要放在服务器上?
|
2
looking0truth 2023-07-26 22:43:50 +08:00
Chrome 支持读写本地文件
|
3
QingquanBaby OP @lanlanye 本机文件,类似于绿色版的软件(这个软件是网页)
|
4
hamsterbase 2023-07-26 22:49:11 +08:00
|
5
hamsterbase 2023-07-26 22:50:46 +08:00
如果你写的是 markdown ,可以在 vs code 里实时预览。
如果你写的是 html ,可以另外开一个窗口,打开这个 html 。 |
6
flyqie 2023-07-26 22:52:05 +08:00
没记错的话,纯本地 index.html 打开即用且数据保存到同目录下没法做。
|
7
x77 2023-07-26 22:54:57 +08:00
1-4:很多 Web 框架支持数据存储,有的甚至支持本地数据库,数据仅存储于客户端(浏览器)本地,与服务器没无关
5:没有监听,启动浏览器就读取/加载数据。用户操作浏览器(清理缓存)可以删除数据 参考实例(该页面暂不支持移动端): https://ai.xinlake.dev 这个页面的设置存储就是 Flutter 框架支持的本地数据库及数据存储。 |
8
QingquanBaby OP @hamsterbase 不联网可以实现吗
|
9
hamsterbase 2023-07-26 23:06:32 +08:00
@QingquanBaby 这个不太清楚 ,可以网上搜搜看有没有现成的。
|
10
chihiro2014 2023-07-26 23:11:26 +08:00
sqlite?
|
11
placeholder 2023-07-27 08:15:24 +08:00 1
数据你简单说说是啥数据,key:value 这种直接存 locale storage 不行吗?
复杂一点的数据、文件看看 indexedDB 呢,也是本地存储,我看 edge 、firefox 、chrome 都支持。这仨浏览器基本覆盖你说的三个系统了吧。 不过这种保存方式保证不了持久化就是了,客户卸载浏览器或者清除浏览器缓存就没了 |
12
QingquanBaby OP @placeholder 这种方式可以将数据做导入导出吗,可以的话就不用管浏览器缓存之类的了
|
13
QingquanBaby OP @chihiro2014 sqlite 对数据的存取很好用,但是需要搞一个监听,这个监听我暂时还没想到可控的办法
|
14
QingquanBaby OP @placeholder 感觉可行,正在看
|
15
macy 2023-07-27 09:53:39 +08:00
chrome 存在 indexdb 里面,就行,只要别卸载浏览器或者手动把 indexdb 的数据库删除掉,数据都在
|
16
isSamle 2023-07-27 10:56:06 +08:00
本地数据库可以实现吧,sql.js 读写本地 db 文件试下
|
17
isSamle 2023-07-27 11:01:39 +08:00
我之前 Vue-Electron 研究了一段时间的本地存储,可以参考下我这个项目[GhostWriter]( https://github.com/MarkSamle/GhostWriter),理论上来讲,应该可以在本地保存一个 db 文件,然后通过相关方法读写,配合 sql.js 写一个本地数据库操作的 js 文件用来实现类似 api 的功能应该就行了
|
18
liuhai233 2023-07-27 12:32:17 +08:00
你这个做个 electron 就行吧
|
19
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> ``` |
20
lujiaxing 2023-07-27 13:44:56 +08:00
md 什么时候 V2EX 能支持贴代码呢
|
21
QingquanBaby OP @lujiaxing 保存后的数据能否导出呢,有一个需求是比如我保存了一些值,需要在其他电脑上看(不能联网传输)
|
22
lujiaxing 2023-07-27 15:05:52 +08:00
@QingquanBaby 可以. 你把 数据按逗号跟换行符分割, 保存成 csv 文件然后转为 blob 链接给用户下载 (或自动触发链接点击事件弹出下载) 就行, 导出的文件 EXCEL 都能打开.
|
23
placeholder 2023-07-27 16:31:50 +08:00
@QingquanBaby 做不到后台静默导入导出,导出我想到的就是造个文件然后通过浏览器下载到本地,导入也得手动选择文件上传,
导出你可以看看 file saver 这个 npm 包,导入不知道,我没做过 |
24
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 没有后缀名罢了. |
25
placeholder 2023-07-28 09:16:12 +08:00
@lujiaxing 学习了
|