web-dev-qa-db-ja.com

JavaScriptを使用してHTMLをローカルに保存する

セキュリティ上の理由から、Javascriptがファイルシステムにデータを書き込めないことは知っています。 Javascriptでデータをローカルに保存する唯一の方法はcookieまたはlocalStorageであるとよく読んでいます。

ただし、ファイルにアクセスする非常に特殊なケースでは、、データを書き込むためにlocally（インターネット経由ではない） locally？ （サーバー言語なし、サーバーなしでも... HTMLファイルのローカルブラウジングのみ）

たとえば、[〜＃〜] save [〜＃〜] here on this page ...

... HTMLファイルが新しいコンテンツで上書きされること（つまり、localHTMLファイルは、[〜＃〜] save [〜＃〜]が押されたときに更新する必要があります）。

enter image description here

これは、HTMLページにアクセスするときにJavascriptのおかげでファイルを保存することは可能ですか？locally？（

注：静かに保存できるようにしたい、ユーザーがどこで選択するかを選択するダウンロード/保存ダイアログボックスを提案しないダウンロードしてから、「上書きしてもよろしいですか」など

[〜＃〜] edit [〜＃〜]：なぜこの質問ですか？サーバーなしでローカルに実行できるHTML/JSメモ帳を実行できるようにしたいです（Apache、PHPなし）。 「どこでファイルをダウンロードしますか？」というダイアログボックスに対処することなく、簡単に保存できる必要があります。

javascripthtmlserialization
19
Basj

W3CファイルAPI標準からの正解：

ユーザーエージェントは、上記の機能を公開するスクリプトに公開されるAPIを提供する必要があります。ユーザーは、ファイルシステムとの対話が発生するたびにUIによって通知され、ユーザーはトランザクションをキャンセルまたは中止できます。ユーザーにはファイルの選択が通知され、これらをキャンセルできます。これらのAPIへの呼び出しは、ユーザーの介入なしにサイレントに発生しません。

基本的に、セキュリティ設定により、ファイルをダウンロードするたびに、ブラウザはユーザーが実際にファイルを保存することを確認します。ブラウザは、コンピューター上のJavaScriptとWebサーバーのJavaScriptを実際に区別しません。唯一の違いは、ブラウザがファイルにアクセスする方法です。したがって、ページをローカルに保存しても違いはありません。

回避策：ただし、<div>クッキー内。ユーザーが戻ってきたら、Cookieから読み込むことができます。ファイルをユーザーのコンピューターに正確に保存するわけではありませんが、ファイルを上書きするのと同じ効果があります。ユーザーが戻ると、最後に入力した内容が表示されます。欠点は、ユーザーがWebサイトのデータを消去すると、情報が失われることです。ローカルストレージをクリアするというユーザーのリクエストを無視することはalsoセキュリティ上の問題なので、実際に回避する方法はありません。

ただし、次のこともできます。

  • Javaアプレットを使用
  • 他の種類のアプレットを使用する
  • デスクトップ（非Webベース）アプリケーションを作成する
  • ウェブサイトのデータを消去するときは、必ずファイルを保存してください。ページを終了すると、ポップアップして通知するアラートを作成したり、保存ウィンドウを開いたりすることもできます。

Cookieの使用：あなたはcanローカルページでJavaScript Cookieを使用します。これをファイルに入れてブラウザで開きます：

<!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>
7
FlyingPiMonster

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();
}

ファイルが保存されます。

12
Awesomeness01

はい、可能です。

あなたの例では、すでに ContentEditable を使用しています。その属性のチュートリアルのほとんどには、何らかのlocalStrorageの例があります。 http://www.html5tuts.co.uk/demos/localstorage/

ページのロード時に、スクリプトは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
Teo Dragovic

ファイルを保存し、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);
3
RadleyMith

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>

ブラウザで試してみてください。サーバーは必要ありません。

1
Leo

https://github.com/firebase/firepad を使用するだけです— 実際の動作を見る
これは、コンピューターにサーバーを必要とせず、データをリモートで保存して保存します。

1
Kirk Strobeck

このコンテキストでサーバーとクライアントの違いを明確にすることが重要だと思います。

クライアント/サーバーは、あるプログラム（クライアント）が別のプログラム（サーバー）からサービスまたはリソースを要求するプログラム関係です。

ソース： http://searchnetworking.techtarget.com/definition/client-server

少なくとも1つのサーバー/クライアント関係を持たない高度なアプリケーションがあまりにも多く見つかるかどうかはわかりません。 プログラムが別のプログラムと話すときは常にクライアント/サーバー関係であるため、サーバーなしでこれを達成するように依頼するのはやや誤解を招く可能性があります、リクエスターはクライアントであり、応答はサーバーから送信されます。これは、ローカルで作業している場合でも同様です。ブラウザの範囲外で何かをしたい場合は、サーバーにフックが必要です。

さて、それはサーバー側の特定の言語なしではこれを達成できないという意味ではありません。たとえば、 このソリューション は、サーバーにNodeJSを使用します。 WinJSにはWinJS.xhrがあり、これは XmlHttpRequest を使用してサーバーにデータを提供します。

AJAXは、同じ種類の機能を提供しようとしています。ここでのポイントは、「save file」などのコマンドを発行すると、プログラムがあるか、何らかのフックが事前に構築されているか、ファイルは実際に保存されます。サーバー側の言語であろうと他のものであろうと、ファイルを解析するプログラムが反対側にあります。つまり、リクエストを受信するサーバーなしではこの関数のようなものを持つことはできないでしょう。

1
smcjones

これをご覧ください:) Javascript/jQueryを使用してファイルをダウンロード 必要なものはすべて揃っているはずです。それでも助けが必要な場合、またはそれが必要な解決策ではない場合は、教えてください;）

1
Tom-Oliver Heidel

JsPDFを使用-> https://github.com/MrRio/jsPDF

<div id="content">
     <h3>Hello, this is a H3 tag</h3>
    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

Javascript

  var doc = new jsPDF();
  var specialElementHandlers = {
      '#editor': function (element, renderer) {
          return true;
      }
  };

  $('#cmd').click(function () {
      doc.fromHTML($('#content').html(), 15, 15, {
          'width': 170,
              'elementHandlers': specialElementHandlers
      });
      doc.save('sample-file.pdf');
  });
0
Brayan Pastor

はい、可能です。例による証明：

TiddlyFox：は、アドオンを介してローカルファイルを変更できます。 （ ソースコード ）（ 拡張ページ ）：

TiddlyFoxは、Mozilla Firefoxの拡張機能で、TiddlyWikiがファイルシステムに変更を直接保存できるようにします。

Todo.html：編集を自分自身に保存するHTMLファイル。現在、Internet Explorerでのみ機能し、最初にファイルを開くときにいくつかのセキュリティダイアログを確認する必要があります。 （ ソースコード ）（ 機能デモ ）。

Todo.htmlが実際に変更をローカルに保存することを確認する手順：

  1. todo.html をローカルのハードドライブに保存します
  2. Internet Explorerで開きます。すべてのセキュリティダイアログを受け入れます。
  3. コマンドを入力todo add TEST（todo.htmlは todo.txt-CLI のコマンドラインインターフェイスをエミュレートします）
  4. 「TEST」の追加についてtodo.htmlファイルを調べます

警告：クロスプラットフォームの方法はありません。これらのメソッドがどれくらい長く存在するかはわかりません。最初にtodo.htmlプロジェクトを開始したとき、 twFile というjQueryプラグインがあり、4つの異なるメソッド（ActiveX、Mozilla XUL、Javaアプレット、Java Live Connect）。ActiveXを除き、ブラウザはセキュリティ上の懸念からこれらすべてのメソッドを許可していません。

0
Leftium