Javascriptを使用してローカルファイルを読み書きする方法
5472 ワード
最近、卒業設計に専念していますが、私がしなければならないプロジェクトは迷宮検索に似ていて、アルゴリズムの実行時の効果を表示するためにjavascriptを採用しています(canvasを使って図を描きます).
その1つの機能はjsコードがランダムに生成された迷路をローカルファイルに保存し、次回の読み取りを容易にすることです.一般的に、javascriptはセキュリティ上の理由でオペレーティングシステムファイルにファイルを書くことは推奨されません.また、いくつかの方法を検索しました.ここでまとめます.
【方法1】localStorage
localStorageはキー値ペアで読み込みます
保存時:localStorage[key]=value;
読み込み時:value=localStorage[key];
保存後、ページが閉じていても、次回ページを開いても直接読み取ることができます.欠点はファイルを保存することではなく、直接アクセスできないことです.
Ref: http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
http://blog.csdn.net/dojotoolkit/article/details/6614883
【方法2】execCommand(「saveas」)
この方法は、ファイルを保存するためのコードの詳細を参照してください.http://4umi.com/web/javascript/filewrite.php
htmlセクションは次のとおりです.
その欠点はブラウザのサポートが悪いことで、私が使っているIE 11(たまに更新強迫症)は実行できます(ActiveXObjectを有効にします)、Chromeはだめです.Chromeの安全性が高いことがわかります.
execCommand()には他にもいろいろな使い方があります.Ref: http://www.jsann.com/post/JS_execCommand_method.html
【方法3】File API
File APIはhtml 5の新しい規格で、ファイルを読むことも書くこともできます.ここに注意してください.
ファイルを読む:OSのファイルシステムのファイルをブラウザページに読む
≪ファイルの書き込み|Write File|ldap≫:ブラウザ・ページのデータをブラウザ・ファイル・システムに書き込む
ブログを参照:http://www.html5rocks.com/en/tutorials/file/dndfiles/
その中の説明は詳しいですが、ファイルを読むときは画像を読むのに使います.ここにテキストを読むコードを貼ってください.
ファイルを読むにはFileReaderインタフェースを使い、ファイルを書くにはFileWriterを使い、ファイルを書くにはブラウザのファイルシステム(root)にページデータを書き込むのですが、OSのファイルシステムに保存する必要があるので、別の方法を採用します.まずBlobBuilderで書き込むデータをBlobに合成し、Blobを表すURLを作成し、ブラウザによって保存ポリシーを選択します.実際にはファイルをダウンロードします
JSファイル:
File APIという方法は、IEもChromeも可能です.
Ref: http://www.w3.org/TR/FileAPI/
その1つの機能はjsコードがランダムに生成された迷路をローカルファイルに保存し、次回の読み取りを容易にすることです.一般的に、javascriptはセキュリティ上の理由でオペレーティングシステムファイルにファイルを書くことは推奨されません.また、いくつかの方法を検索しました.ここでまとめます.
【方法1】localStorage
localStorageはキー値ペアで読み込みます
保存時:localStorage[key]=value;
読み込み時:value=localStorage[key];
保存後、ページが閉じていても、次回ページを開いても直接読み取ることができます.欠点はファイルを保存することではなく、直接アクセスできないことです.
Ref: http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
http://blog.csdn.net/dojotoolkit/article/details/6614883
【方法2】execCommand(「saveas」)
この方法は、ファイルを保存するためのコードの詳細を参照してください.http://4umi.com/web/javascript/filewrite.php
htmlセクションは次のとおりです.
<form action="#" onsubmit="return savefile(this);">
<textarea name="txt" title=" Text edit area - Alt+Z " accesskey="z" rows="10" cols="80">123</textarea>
<div>
<input title=" Save - Alt+S " class="key" accesskey="s" type="submit" value=" Save ">
<label title=" Filename - Alt+A " for="filename">As</label>
<input name="filename" class="it" id="filename" accesskey="a" type="text" size="40" value="D:\MazeSet\1">
<select name="ext" title=" Extension ">
<option value="iso-8859-1">.html</option>
<option selected="selected" value="utf-8">.txt</option>
</select>
<input title=" Remove null bytes - Alt+U " class="key" accesskey="u" onclick="this.form.elements.txt.value = unnull( this.form.elements.txt.value );" type="button" value=" Unnull ">
<input title=" Reset the form to its initial state - Alt+R " class="key" accesskey="r" type="reset" value=" Reset ">
</div>
</form>その欠点はブラウザのサポートが悪いことで、私が使っているIE 11(たまに更新強迫症)は実行できます(ActiveXObjectを有効にします)、Chromeはだめです.Chromeの安全性が高いことがわかります.
execCommand()には他にもいろいろな使い方があります.Ref: http://www.jsann.com/post/JS_execCommand_method.html
【方法3】File API
File APIはhtml 5の新しい規格で、ファイルを読むことも書くこともできます.ここに注意してください.
ファイルを読む:OSのファイルシステムのファイルをブラウザページに読む
≪ファイルの書き込み|Write File|ldap≫:ブラウザ・ページのデータをブラウザ・ファイル・システムに書き込む
ブログを参照:http://www.html5rocks.com/en/tutorials/file/dndfiles/
その中の説明は詳しいですが、ファイルを読むときは画像を読むのに使います.ここにテキストを読むコードを貼ってください.
<html>
<head>
<script type="text/javascript" src="ReadTest.js">
var a=new Array();
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
if(files[0])
{
var reader = new FileReader();
reader.readAsText(files[0]);
reader.onload = loaded;
}
}
function loaded(evt) {
var fileString = evt.target.result;
alert(fileString);
}
</script>
</head>
<body>
<input type="file" id="file" name="files[]" multiple />
<script type="text/javascript">
var btn=document.getElementById('file');
btn.addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>ファイルを読むにはFileReaderインタフェースを使い、ファイルを書くにはFileWriterを使い、ファイルを書くにはブラウザのファイルシステム(root)にページデータを書き込むのですが、OSのファイルシステムに保存する必要があるので、別の方法を採用します.まずBlobBuilderで書き込むデータをBlobに合成し、Blobを表すURLを作成し、ブラウザによって保存ポリシーを選択します.実際にはファイルをダウンロードします
JSファイル:
function doSave(value, type, name) {
var blob;
if (typeof window.Blob == "function") {
blob = new Blob([value], {type: type});
} else {
var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
var bb = new BlobBuilder();
bb.append(value);
blob = bb.getBlob(type);
}
var URL = window.URL || window.webkitURL;
var bloburl = URL.createObjectURL(blob);
var anchor = document.createElement("a");
if ('download' in anchor) {
anchor.style.visibility = "hidden";
anchor.href = bloburl;
anchor.download = name;
document.body.appendChild(anchor);
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
anchor.dispatchEvent(evt);
document.body.removeChild(anchor);
} else if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, name);
} else {
location.href = bloburl;
}
}
var a=new Array();
for(var i=0;i<10;i++)
a.push(i);
function Save(){
doSave(a, "text/latex", "hello.txt");
}
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="SaveBlob.js"/>
</head>
<body>
<input type="button" id="savetext" value="Save" onclick="Save()"/></div>
</body>
</html>
File APIという方法は、IEもChromeも可能です.
Ref: http://www.w3.org/TR/FileAPI/