Сохранить HTML локально с помощью Javascript

Я знаю, что Javascript не может записывать данные в файловую систему по соображениям безопасности. Я часто читал, что единственный способ сохранить данные локально с Javascript - это файлы cookie или localStorage.

Но возможно ли, что в самом конкретном случае, когда к файлу обращается локально (а не через интернет), чтобы записывать данные локально? (без какого-либо языка сервера и даже без какого-либо сервера вообще... просто локальный просмотр HTML файла)

Например, было бы возможно, нажав на SAVE здесь на этой странице...

... что HTML файл перезаписывается новым контентом? (т.е. HTML файл локальный должен быть обновлен при нажатии SAVE).

Возможно ли СОХРАНИТЬ файл благодаря Javascript, когда страница HTML доступна локально?

Примечание. Я хочу, чтобы молча сохранять, не предлагая диалоговое окно "Загрузка/Сохранение", в котором пользователь должен выбрать, где загрузить, затем "Вы действительно хотите перезаписать", и др.

РЕДАКТИРОВАТЬ. Почему этот вопрос? Я хотел бы иметь возможность сделать блокнот HTML/JS, который я могу запустить локально без какого-либо сервера (нет apache, no php). Мне нужно легко сэкономить, не имея дело с диалоговым окном "Где вы хотите загрузить файл?".

Ответ 1

Канонический ответ, стандарт API файлов W3C:

Пользовательские агенты должны предоставить API, открытый для script, который раскрывает вышеописанные функции. Пользователь уведомляется UI в любое время, когда происходит взаимодействие с файловой системой, что дает пользователю полную возможность отменить или прервать транзакцию. Пользователь уведомляется о любом выборе файла и может отменить его. Никакие вызовы для этих API не выполняются без вмешательства пользователя.

В принципе, из-за настроек безопасности, в любое время, когда вы загружаете файл, браузер будет убедиться, что пользователь действительно хочет сохранить файл. Браузеры не отличаются от JavaScript на вашем компьютере и JavaScript с веб-сервера. Единственное различие заключается в том, как браузер обращается к файлу, поэтому сохранение страницы локально не будет иметь значения.

Обходные: Однако вы можете просто сохранить innerHTML <div> в файле cookie. Когда пользователь вернется, вы можете загрузить его из файла cookie. Хотя это не совсем сохранение файла на компьютере пользователя, он должен иметь тот же эффект, что и перезапись файла. Когда пользователь вернется, они увидят, что они вступили в последний раз. Недостатком является то, что если пользователь очистит данные своего сайта, их информация будет потеряна. Так как игнорирование пользовательского запроса на очистку локального хранилища также является проблемой безопасности, на самом деле его нет.

Однако вы также можете сделать следующее:

Использование апплета Java
Использовать какой-либо другой апплет
Создайте приложение на рабочем столе (не на веб-сайте)
Не забудьте сохранить файл, когда вы очищаете данные своего веб-сайта. Вы можете создать оповещение, которое появляется и напоминает вам, или даже открывает окно сохранения для вас, когда вы выходите из страницы.

Использование файлов cookie: Вы можете использовать куки JavaScript на локальной странице. Просто поместите это в файл и откройте его в своем браузере:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <p id="timesVisited"></p>
  <script type="text/javascript">
    var timesVisited = parseInt(document.cookie.split("=")[1]);
    if (isNaN(timesVisited)) timesVisited = 0;
    timesVisited++;
    document.cookie = "timesVisited=" + timesVisited;
    document.getElementById("timesVisited").innerHTML = "You ran this snippet " + timesVisited + " times.";
  </script>
</body>

</html>

Ответ 2

Да, это возможно.

В вашем примере вы уже используете ContentEditable, и большинство учебников для этого атрибута имеют какой-то пример localStrorage, т.е. http://www.html5tuts.co.uk/demos/localstorage/

При загрузке страницы script следует проверить localStorage на данные и если true, заполнить элемент. Любые изменения в содержимом могут быть сохранены в localStorage при нажатии кнопки сохранения (или автоматически, в связанном примере, с использованием размытия и фокуса). Кроме того, вы можете использовать этот фрагмент, чтобы проверить, что пользователь погоды находится в автономном режиме или в автономном режиме и на основе состояния изменяет вашу логику:

// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "http://www.yoursite.com/somefile.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open('HEAD', file + "?rand=" + randomNum, false);

    try {
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}

EDIT: Более продвинутая версия localStorage - это Mozilla localForage, которая позволяет хранить другие типы данных, кроме строк.

Ответ 3

Вы можете сохранить файлы и сделать их постоянными с помощью FileSystem-API и webkit. Вам нужно будет использовать Chrome-браузер, и это не стандартная технология, но я думаю, что он делает именно то, что вы хотите. Вот отличный учебник, чтобы показать, как это сделать http://www.noupe.com/design/html5-filesystem-api-create-files-store-locally-using-javascript-webkit.html

И чтобы показать, что его по теме он начинает показывать вам, как сделать файл сохраненным постоянным...

window.webkitRequestFileSystem(window.PERSISTENT , 1024*1024, SaveDatFileBro);

Ответ 4

Вы можете просто использовать функцию Blob:

function save() {
  var htmlContent = ["your-content-here"];
  var bl = new Blob(htmlContent, {type: "text/html"});
  var a = document.createElement("a");
  a.href = URL.createObjectURL(bl);
  a.download = "your-download-name-here.html";
  a.hidden = true;
  document.body.appendChild(a);
  a.innerHTML = "something random - nobody will see this, it doesn't matter what you put here";
  a.click();
}

и ваш файл будет сохранен.

Ответ 5

Преобразуйте свой HTML-контент в строку uri данных и установите атрибут href элемента привязки. Не забудьте указать имя файла как атрибут download.

Вот простой пример:

<a>click to download</a>
<script>
    var anchor = document.querySelector('a');
    anchor.setAttribute('download', 'example.html');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<p>asdf</p>');
</script>

Просто попробуйте в браузере, не требуется сервер.

Ответ 6

Взгляните на это:) Загрузить файл с помощью Javascript/jQuery должно быть все, что вам нужно. Если вам все еще нужна помощь или это не то решение, которое вам нужно, скажите мне;)

Ответ 7

Я думаю, что важно прояснить разницу между сервером и клиентом в этом контексте.

Клиент/сервер - это отношение к программе, в котором одна программа (клиент) запрашивает службу или ресурс из другой программы (сервера).

Источник: http://searchnetworking.techtarget.com/definition/client-server

Я не уверен, что вы найдете слишком много продвинутых приложений, у которых нет хотя бы одного отношения между сервером и клиентом. Несколько неверно просить об этом без какого-либо сервера, потому что в любое время, когда ваша программа говорит с другой программой, это отношение клиент/сервер, причем запросчик является клиентом, а ответ, исходящий из сервер. Это даже если вы работаете на местном уровне. Если вы хотите что-то сделать вне сферы действия браузера, вам нужен крючок на сервере.

Теперь это не означает, что вы не можете достичь этого без специфического для сервера языка. Например, это решение использует NodeJS для сервера. WinJS имеет WinJS.xhr, который использует XmlHttpRequest для обслуживания данных на сервере.

AJAX стремится предложить одни и те же функции. Дело здесь в том, что если у вас есть программа или есть какой-то крючок, предварительно созданный, когда вы выдаете команду типа " сохранить файл", и файл фактически сохраняется, есть программа на другая сторона, которая анализирует его, независимо от того, является ли он серверным языком или чем-то еще, что означает, что вы не можете иметь что-то вроде этой функции без получения сервером запроса.

Ответ 8

Просто используйте https://github.com/firebase/firepad - Посмотрите в действии
Это не обязательно сервер на вашем компьютере, он будет удален и сохранить данные удаленно.

Ответ 9

Да, это возможно. Доказательство на примере:

TiddlyFox: позволяет изменять локальные файлы с помощью надстройки. (исходный код) (страница расширения):

TiddlyFox - это расширение для Mozilla Firefox, которое позволяет TiddlyWiki для сохранения изменений непосредственно в файловой системе.

Todo.html: HTML файл, который сохраняет изменения для себя. В настоящее время он работает только в Internet Explorer, и при первом открытии файла вам необходимо подтвердить некоторые диалоговые окна безопасности. (исходный код) (функциональная демонстрация).

Шаги подтверждения todo.html фактически сохраняют изменения в нем локально:

Сохранить todo.html на локальном жестком диске
Открыть с помощью Internet Explorer. Примите все диалоговые окна безопасности.
Команда типа todo add TEST (todo.html эмулирует интерфейс командной строки todo.txt-CLI)
Осмотреть файл todo.html для добавления 'TEST'

Предостережения: нет кросс-платформенного метода. Я не уверен, как долго эти методы будут существовать. Когда я впервые запустил проект todo.html, появился плагин jQuery под названием twFile, который позволял загружать/сохранять локальные файлы в кросс-браузере, используя четыре разных метода (ActiveX, Mozilla XUL, Java-апплет, Java Live Connect). За исключением ActiveX, браузеры запретили все эти методы из-за проблем с безопасностью.