V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
QingquanBaby
V2EX  ›  程序员

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

  •  
  •   QingquanBaby · 2023-07-26 22:25:28 +08:00 · 1562 次点击
    这是一个创建于 468 天前的主题,其中的信息可能已经有所发展或是发生改变。
    需求:
    1·用浏览器就能打开的,国产麒麟+Linux+Windows 通用
    2·最好不建立 web 监听端口或者服务之类的,也不需要数据库
    3·能够简单地管理一些数据,比如这次打开 index.html 录入一条数据,下次打开还能读取到这条数据
    4·数据存在 index.html 同目录下即可,存储方式不限
    5·如果必须要建立监听后者服务等,启动浏览器时启动,关闭浏览器时监听也关闭

    V 友们能帮忙想想有啥好的办法没,如果有合适的方案,小红包送你
    25 条回复    2023-07-28 09:16:12 +08:00
    lanlanye
        1
    lanlanye  
       2023-07-26 22:29:15 +08:00 via iPhone
    你这个静态……指的是浏览器打开本机文件?还是要放在服务器上?
    looking0truth
        2
    looking0truth  
       2023-07-26 22:43:50 +08:00
    Chrome 支持读写本地文件
    QingquanBaby
        3
    QingquanBaby  
    OP
       2023-07-26 22:44:52 +08:00
    @lanlanye 本机文件,类似于绿色版的软件(这个软件是网页)
    hamsterbase
        4
    hamsterbase  
       2023-07-26 22:49:11 +08:00
    1. 访问 https://vscode.dev/

    2. 打开本地文件夹

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

    参考实例(该页面暂不支持移动端): https://ai.xinlake.dev
    这个页面的设置存储就是 Flutter 框架支持的本地数据库及数据存储。
    QingquanBaby
        8
    QingquanBaby  
    OP
       2023-07-26 22:57:43 +08:00
    @hamsterbase 不联网可以实现吗
    hamsterbase
        9
    hamsterbase  
       2023-07-26 23:06:32 +08:00
    @QingquanBaby 这个不太清楚 ,可以网上搜搜看有没有现成的。
    chihiro2014
        10
    chihiro2014  
       2023-07-26 23:11:26 +08:00
    sqlite?
    placeholder
        11
    placeholder  
       2023-07-27 08:15:24 +08:00   ❤️ 1
    数据你简单说说是啥数据,key:value 这种直接存 locale storage 不行吗?

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

    不过这种保存方式保证不了持久化就是了,客户卸载浏览器或者清除浏览器缓存就没了
    QingquanBaby
        12
    QingquanBaby  
    OP
       2023-07-27 09:18:04 +08:00
    @placeholder 这种方式可以将数据做导入导出吗,可以的话就不用管浏览器缓存之类的了
    QingquanBaby
        13
    QingquanBaby  
    OP
       2023-07-27 09:19:26 +08:00
    @chihiro2014 sqlite 对数据的存取很好用,但是需要搞一个监听,这个监听我暂时还没想到可控的办法
    QingquanBaby
        14
    QingquanBaby  
    OP
       2023-07-27 09:23:49 +08:00
    @placeholder 感觉可行,正在看
    macy
        15
    macy  
       2023-07-27 09:53:39 +08:00
    chrome 存在 indexdb 里面,就行,只要别卸载浏览器或者手动把 indexdb 的数据库删除掉,数据都在
    isSamle
        16
    isSamle  
       2023-07-27 10:56:06 +08:00
    本地数据库可以实现吧,sql.js 读写本地 db 文件试下
    isSamle
        17
    isSamle  
       2023-07-27 11:01:39 +08:00
    我之前 Vue-Electron 研究了一段时间的本地存储,可以参考下我这个项目[GhostWriter]( https://github.com/MarkSamle/GhostWriter),理论上来讲,应该可以在本地保存一个 db 文件,然后通过相关方法读写,配合 sql.js 写一个本地数据库操作的 js 文件用来实现类似 api 的功能应该就行了
    liuhai233
        18
    liuhai233  
       2023-07-27 12:32:17 +08:00
    你这个做个 electron 就行吧
    lujiaxing
        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>
    ```
    lujiaxing
        20
    lujiaxing  
       2023-07-27 13:44:56 +08:00
    md 什么时候 V2EX 能支持贴代码呢
    QingquanBaby
        21
    QingquanBaby  
    OP
       2023-07-27 14:51:00 +08:00
    @lujiaxing 保存后的数据能否导出呢,有一个需求是比如我保存了一些值,需要在其他电脑上看(不能联网传输)
    lujiaxing
        22
    lujiaxing  
       2023-07-27 15:05:52 +08:00
    @QingquanBaby 可以. 你把 数据按逗号跟换行符分割, 保存成 csv 文件然后转为 blob 链接给用户下载 (或自动触发链接点击事件弹出下载) 就行, 导出的文件 EXCEL 都能打开.
    placeholder
        23
    placeholder  
       2023-07-27 16:31:50 +08:00
    @QingquanBaby 做不到后台静默导入导出,导出我想到的就是造个文件然后通过浏览器下载到本地,导入也得手动选择文件上传,

    导出你可以看看 file saver 这个 npm 包,导入不知道,我没做过
    lujiaxing
        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>
    &nbsp;
    <button onclick="exportContent()">导出</button>
    </div>
    </body>
    </html>
    ```

    点导出就可以下载输入框里的文件.
    所有支持 HTML 5 都可以.
    不支持 HTML 5 的浏览器最多就是下载的文件变成了 GUID 没有后缀名罢了.
    placeholder
        25
    placeholder  
       2023-07-28 09:16:12 +08:00
    @lujiaxing 学习了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2967 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:19 · PVG 08:19 · LAX 16:19 · JFK 19:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.