使用javascript读写本地文件的方法

来源：互联网发布：淘宝女装名店排行编辑：程序博客网时间：2024/06/09 23:37

近期在全身心做毕业设计，我需要做的项目类似于迷宫搜索，为了显示算法运行时的效果，采用了javascript来写（使用canvas来画图）。

其中一个功能是把js代码随机生成的迷宫保存到本地文件中，方便下次读取。一般来说，由于安全因素，javascript写文件到操作系统文件中是不推荐的，不还还是搜索到了一些方法，这里总结一下：

【方法一】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

【方法二】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>

其缺点是浏览器的支持不好，我用的IE11(偶有更新强迫症)可以运行(启用ActiveXObject)，Chrome不行，可见Chrome安全性更高.

execCommand()还有很多其他用法,Ref: http://www.jsann.com/post/JS_execCommand_method.html

【方法三】File API

File API是html5新标准，既可以读文件，也可以写文件，注意这里的

读文件：OS中文件系统中的文件读到浏览器页面中

写文件：将浏览器页面数据写到浏览器文件系统中

参见博客：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"); }

HTML文件:

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

代码参考: http://www.cnblogs.com/zoho/archive/2012/05/27/2520468.html

File API 这种方法，IE和Chrome皆可行。

Ref: http://www.w3.org/TR/FileAPI/

1 0