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

Question

我正在开发一个简单的应用程序，它允许用户上传图像和视频，同时自动为每个上传的内容生成一个

并将其包装起来。每张上传的图片都位于前一张经过特殊风格处理的图片旁边。

我想要的是在每次上传(图像或视频)后，即使我关闭应用程序，它也会保留在那里。而如果以后我把它去掉，它自然就会消失。

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

//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>

最佳答案

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

问题:没有本地数据库是否可以做到这一点？

答案:是的，这是可能的，但要了解后果。

首先，考虑您的目标。您希望用户能够访问您的应用程序中的图像/文件。有两种主要方法可以实现此目的。

• 用户将图像/文件上传到您的服务器(或图像/文件的二进制表示形式)
• 用户将其本地计算机上的图像/文件的路径上传到您的服务器。每当您的应用请求此图像时，它就会知道在本地计算机上哪里可以找到它(假设路径没有更改)

正如您可以想象的那样，这两者都会产生许多后果，但这对于这个问题来说有点偏离主题。

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

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

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

此外，不确定您正在运行什么操作系统，但一定要看看您的 nwjs 项目文件夹。如果您有 Mac，它很可能位于以下路径:

• Users/YourName/Library/Application Support/Your_Project_Name(与 package.json 名称匹配)

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

关于javascript - 是否可以在 NW.js 中离线保存 html 元素更改？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36437717/

Answer 1

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

问题:没有本地数据库是否可以做到这一点？

答案:是的，这是可能的，但要了解后果。

首先，考虑您的目标。您希望用户能够访问您的应用程序中的图像/文件。有两种主要方法可以实现此目的。

• 用户将图像/文件上传到您的服务器(或图像/文件的二进制表示形式)
• 用户将其本地计算机上的图像/文件的路径上传到您的服务器。每当您的应用请求此图像时，它就会知道在本地计算机上哪里可以找到它(假设路径没有更改)

正如您可以想象的那样，这两者都会产生许多后果，但这对于这个问题来说有点偏离主题。

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

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

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

此外，不确定您正在运行什么操作系统，但一定要看看您的 nwjs 项目文件夹。如果您有 Mac，它很可能位于以下路径:

• Users/YourName/Library/Application Support/Your_Project_Name(与 package.json 名称匹配)

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