Можно ли сохранить изменения элементов html в автономном режиме в NW.js?

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.Если у вас есть макинтош это, скорее всего, будет располагается по следующему пути:

• Поддержка пользователей/ВашеИмя/Library/Application/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)

Internally nw.js использует sqldatabse для localstorage, поэтому это действительно просто безболезненный способ получить дешевое хранилище данных.