是否可以在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

有趣的问题。没有理解你的应用程序的所有细节，你的问题没有正确的答案，但这里有一些信息。

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

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

首先，考虑你的目标。您希望用户有权访问应用程序中的图像/文件。这可以通过两种主要方式来完成。

• 用户上传图像/文件到你的服务器（或图像/文件的二进制表示）
• 用户上传的路径到本地计算机上的图像/文件到您的服务器。每当你的应用程序请求该图像就会知道哪里可以找到它在本地计算机（假设路径没有改变）

正如你能想象有一些与任何后果，但就是有点这个问题的主题。

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

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

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

此外，不知道你正在运行的操作系统，但绝对看看你的nwjs项目文件夹。如果你有一个苹果，将最有可能位于以下路径：

• 用户/ YOURNAME /库/ Application Support/Your_Project_Name（的package.json名称相匹配）

很多人不知道的内置的功能已经包含在nwjs中，并且始终是一个开始搜索的好地方。

Answer 2

一个简单的方法是在localstorage中存储用户更改的元数据（哪些图像，什么顺序等）。在启动时，您只需遍历元数据，然后重新创建html即可。

由于您使用nw.js你不必担心限制在localStorage的，因为你可以设置在清单大小：

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

（寻找dom_storage_quota）

内部nw.js使用sqldatabse进行本地存储，所以这实际上只是一种无痛的方式来获取便宜的数据存储。