是否可以在 NW.js 中离线保存 html 元素更改？

Question

我正在开发一个简单的应用程序，它允许用户上传图片和视频，同时自动为上传的每个内容生成一个 < div > 并将其包装。每张上传的图片都紧挨着经过特殊风格化处理的前一张图片。

我想要的是在我每次上传（图片或视频）后，即使我关闭我的应用程序，它也会保留在那里。以后我把它去掉，它自然就没有了。

是否可以在没有任何本地数据库的情况下执行此操作？如果不行，使用数据库执行此操作的最佳方法是什么？使用哪个模块？

//image upload

function uploadImage(file) {

  var reader = new FileReader();
  var div_img = $('<div class="content"></div>');
  reader.onload = function(event) {

    img_url = event.target.result;


    div_img.html(('<img src="' + img_url + '" onmousedown="return false" />'));
    div_img.appendTo('#wrapper');

  }

  reader.readAsDataURL(file);

}

$("#the-image-file-field").change(function() {

  uploadImage(this.files[0])
});


//video upload

function renderVideo(file) {
  var reader = new FileReader();
  var div_vid = $('<div class="content_video"></div>');
  reader.onload = function(event) {


    vid_url = event.target.result;


    div_vid.html(('<video controls><source src="' + vid_url + '" type="video/mp4" /> '));

    div_vid.appendTo('#vid_container');
  }


  reader.readAsDataURL(file);
}

$("#the-video-file-field").change(function() {

  renderVideo(this.files[0])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type='file' id="the-image-file-field" accept="image/*" />
<input type="file" id="the-video-file-field" accept="video/*" />

<div id="wrapper" class="wrapper">
  <div id="vid_container"></div>

</div>


<script src="javascripts/uploader.js"></script>

Answer 1

有趣的问题。如果不了解您的应用程序的所有细节，就无法正确回答您的问题，但这里有一些信息。

问题：是否可以在没有本地数据库的情况下执行此操作？

答案： 是的，这是可能的，但请理解后果。

首先，考虑您的目标。您希望用户可以访问您应用程序中的 image/file。有两种主要方法可以做到这一点。

用户将 image/file 上传到您的服务器（或 image/file 的二进制表示）
用户将他们本地machine 上image/file 的路径上传到您的服务器。每当您的应用程序请求此图像时，它就会知道在其本地 mac 网络上的何处找到它（假设路径没有改变）

正如您所想象的那样，这两者都会产生很多后果，但这与这个问题有点偏离主题。

问题：即使关闭应用程序，如何保持上传？

答案： 这将取决于您如何处理第一部分，但总的来说这是一项容易得多的任务。这可以使用 jQuery、Angular 或许多其他前端框架轻松完成。您需要做的是在您的数据库中查询 images/files 的用户当前集合，然后针对每个 image/file 在页面上以特定方式呈现它。实际代码会根据您选择的框架而有很大差异，但总体而言，如何执行此操作的想法是相同的。

其他注意事项：如果您选择将所有 image/file 数据存储在您的服务器上，这在未来可能会变成扩展问题。这样做的好处是什么，而不是使用为 nwjs (storage options) 构建的众多本地存储选项之一？

另外，不确定 OS 你是什么运行但一定要看看你的 nwjs 项目文件夹。如果您有 mac，它很可能位于以下路径：

Users/YourName/Library/Application Support/Your_Project_Name（匹配 package.json 名称）

许多人不知道 nwjs 中已经包含的内置功能，这始终是开始搜索的好地方。

Answer 2

一种简单的方法是将用户更改的元数据（哪些图像、顺序等）存储在本地存储中。在启动时，您只需遍历元数据并重新创建 html 以使其看起来像以前一样。

由于您使用的是 nw.js，因此您不必担心本地存储的限制，因为您可以在清单中设置大小：

https://github.com/nwjs/nw.js/wiki/manifest-format

（寻找dom_storage_quota）

在内部 nw.js 将 sqldatabse 用于本地存储，因此这实际上只是一种获得廉价数据存储的轻松方式。

是否可以在 NW.js 中离线保存 html 元素更改？

Is it possible to save html element changes offline in NW.js?

html

javascript

media

datapersistance

nw.js