是否可以在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進行本地存儲，所以這實際上只是一種無痛的方式來獲取便宜的數據存儲。