Как сохранить данные на локальном hd с помощью javascript?

Я использую CKEditor для создания текста на веб-сайте, который создает документы. Проблема в интернет соединении, ПК далеко от города и нестабильное 3G соединение. У меня уже есть процедура сохранения черновика каждые десять секунд (или время, которое пользователь хочет) на сервере для безопасной - простой задачи. Проблема в том, что если интернет отключится, пользователю придется выбрать - скопировать текст и попытаться сохранить его локально с помощью какого-нибудь текстового редактора (может быть, Word, это приведет к беспорядку).

Поэтому мне интересно, существует ли уже способ создать файл и загрузить его на локальный HD без удаленного сервера, только с помощью JavaScript и навигатора. Кроме того, это может быть другой способ сохранить задание, но оставить процессор включенным и навигатор открытым, но не может найти в переполнении стека.

Я обнаружил только один нестандартный API, совместимый с FireFox: API хранилища устройств Конечно, это не стандарт JavaScript, поэтому я не знаю, стоит ли его использовать прямо сейчас.

Есть идеи?


person Gustavo    schedule 28.03.2015    source источник
comment
LocalStorage или создайте Blob   -  person LJᛃ    schedule 28.03.2015
comment
Предложение ссылки для скачивания (например, с URL-адресом большого двоичного объекта), которая позволит пользователю сохранить файл, кажется хорошим, за исключением того, что для этого потребуется взаимодействие с пользователем каждый раз, когда вы хотите сохранить или загрузить. Локальное хранилище сохранит ограниченный объем данных в браузере (надеюсь, достаточно для вас) без взаимодействия.   -  person Touffy    schedule 28.03.2015
comment
У вас также есть возможность использовать indexedDB, если чистое браузерное решение подходит.   -  person Paul S.    schedule 28.03.2015
comment
На самом деле, я хочу, чтобы взаимодействие (окно загрузки) предупредило пользователя о том, что соединение не работает, поэтому он знает, что ему придется сохранить работу в HD, чтобы перезапустить ее позже, загрузив сохраненную работу. Итак, если я создам большой двоичный объект, как мне запустить окно загрузки? Метода blob.download нет...   -  person Gustavo    schedule 29.03.2015


Ответы (2)


[Примечание о совместимости]

В этом решении используется атрибут <a> download для сохранения данных в текстовом файле.
Этот атрибут html5 поддерживается только Chrome 14+, Firefox 20+ и Opera 15+ на настольном компьютере, ни один на iOS и все текущие основные, кроме WebView на Android.

- Обходной путь для IE 10+ — не скрывать/уничтожать ссылку, сгенерированную clickSave(), и просить пользователя right-click > Save target As…

-Нет известного обходного пути для Safari.

Также обратите внимание, что данные по-прежнему будут доступны через localStorage.getItem() для Firefox 3.5+, Chrome&Safari 4+, Opera 10.5+ и IE 9+ (xhr приведет к сбою IE 8-)


Я бы сделал это так, предполагая, что ваш фактический код сохраняет данные через xhr< /а>.

function saveData() {
    var xhr = new XMLHttpRequest();
    //set a timeout, in ms, to see if we're still connected
    xhr.timeout = 2000;
    xhr.addEventListener('timeout', localStore, false);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        // not a good news
        if (xhr.status !== 200) {
          localStore();
        }
        else{
          document.querySelector('#local_alert').style.display = 'none';
        }
      }
    }
    //I assume you already have the part where you set the credentials
    xhr.open('POST', 'your/url.php');
    xhr.send();
  }

  //Show the link + Store the text in localStorage
  function localStore() {
    document.querySelector('#local_alert').style.display = 'block';
    var userText = document.querySelector('textArea').value;
    localStorage.setItem("myAwesomeTextEditor", userText);
  }

  //provide a link to download a file with txt content
  window.URL = window.URL || window.webkitURL;
  function clickSave(e) {
    var userText = document.querySelector('textArea').value;
    var blob = new Blob([userText], {type: 'plain/text'});
    var a = document.createElement('a');
    a.download = "myAwesomeTextEditor" + (new Date).getTime() + '.txt';
    a.href = URL.createObjectURL(blob);
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    }

  setInterval(saveData, 3000);
#local_alert {
  display: none;
  position: static;
  width: 100%;
  height: 3em;
  background-color: #AAA;
  color: #FFF;
  padding: 0.5em;
}
body,
html {
  margin: 0
}
<div id="local_alert">You're actually offline, please beware your draft is not saved on our server
  <button onclick="clickSave()">Save Now</button>
</div>

<textarea></textarea>

Ps: Если ваш пользователь покинет страницу без подключения, вы сможете получить текст обратно через localStorage.getItem("myAwesomeTextEditor")

PPs: более «живой» пример можно найти здесь (он не будет сохраняться в сервер, но остальная логика у вас работает). Попробуйте отключить, а затем снова подключить.

person Kaiido    schedule 28.03.2015
comment
Предполагаемое применение userUniqueId ? - person guest271314; 28.03.2015
comment
нет, это не так, это выдает ошибку безопасности, что на самом деле является хорошей новостью. Вам также нужно будет изменить URL-адрес и установить данные публикации (я предполагал, что вы всегда делаете это в последнюю очередь) - person Kaiido; 29.03.2015
comment
Я думал, что браузер запросит имя файла и сохранит его в файловой системе ОС, но мне кажется, что localStorage — это виртуальный жесткий диск браузера, верно? Если это правда, мы должны учитывать, насколько сохранятся данные: могу ли я выключить компьютер, включить его позже и восстановить свою работу? Если да, проблема решена, в противном случае нам нужно поговорить с ОС, иначе пользователь расстроится! Решение только для FF не проблема в данном случае, это администратор, для которого пользователь будет использовать выбранный браузер. - person Gustavo; 29.03.2015
comment
Что ж, это решение обеспечивает и то, и другое: вверху страницы появится всплывающее окно, чтобы предупредить пользователя о том, что он отключился, с помощью кнопки l, позволяющей ему хранить данные в локальном текстовом файле с автоматически установленным именем, кстати, и он также сохраняет его в локальном хранилище, что может не совпадать в случае очистки кеша. Но если пользователь не очистит его вручную, он останется на рабочем столе (мобильный браузер более нестабилен, поскольку хранит его в кеше приложения). Поэтому это решение продолжает искать соединение и сохраняет его обратно на сервер, если пользователь повторно подключается к нему. - person Kaiido; 29.03.2015
comment
Оно работает! Только для FireFox, но мне этого достаточно. Другие браузеры могут предупредить пользователя о том, что данные находятся в кеше - не очищайте его! Спасибо, я думаю, что этот пост содержит ценную информацию. - person Gustavo; 30.03.2015

Пытаться

var editor = document.getElementById("editor");
var saveNow = document.getElementById("save");

function saveFile() {
    if (confirm("save editor text")) {
      var file = document.createElement("a");
      file.download = "saved-file-" + new Date().getTime();
      var reader = new FileReader();
      reader.onload = function(e) {
        file.href = e.target.result;
        document.body.appendChild(file);
        file.click();
        document.body.removeChild(file);
      };
      reader.readAsDataURL(new Blob([editor.value], {
        "type": "text/plain"
      }));
    }
};



saveNow.addEventListener("click", saveFile, false);
<button id="save">save editor text</button><br />
<textarea id="editor"></textarea>

person guest271314    schedule 28.03.2015
comment
да, так лучше, но посмотри комментарий @Touffy к OP - person Kaiido; 28.03.2015
comment
@Kaiido Как сохранить данные на локальном HD с помощью javascript? - person guest271314; 28.03.2015
comment
да тогда? localStorage — это локальный HD, доступный в файлах данных вашего браузера. + посмотрите на мой ответ, он предлагает комбинацию вашего решения (используя вариант для локальной загрузки текстового файла, сгенерированного в браузере) + localStorage + сохранение на стороне сервера - person Kaiido; 28.03.2015
comment
localStorage, это локальное HD? локальный жесткий диск или память браузера? доступен в файлах данных вашего браузера ? Что такое файлы данных вашего браузера? - person guest271314; 28.03.2015
comment
@Kaiido Если пользователь не использует браузер Firefox? См. также kb.mozillazine.org/Webappsstore.sqlite. webappsstore.sqlite — это двоичный файл SQLite и не следует редактировать вручную. - person guest271314; 28.03.2015
comment
Я не знаю для каждого браузера, может быть хороший вопрос, чтобы задать здесь. Я думаю, что мобильные браузеры хранят его в кеше, так что вы правы, возможно, это не HD. В любом случае, те используют флешку, а большинство компов скоро будут использовать SSD... Так в чем здесь смысл? смотрите на вопрос, а не только на заголовок. ОП заявил, что ему нужно хранить офлайн не обязательно на HD. Ваше решение предлагает один способ, что ж, хорошо, я думаю, что он не лучший по причинам, указанным @Touffy. Затем я даю свой, который, я надеюсь, будет соответствовать потребностям ОП. - person Kaiido; 28.03.2015