近期在全身心做毕业设计,我需要做的项目类似于迷宫搜索,为了显示算法运行时的效果,采用了javascript来写(使用canvas来画图)。
其中一个功能是把js代码随机生成的迷宫保存到本地文件中,方便下次读取。一般来说,由于安全因素,javascript写文件到操作系统文件中是不推荐的,不还还是搜索到了一些方法,这里总结一下:
【方法一】localStorage
localStorage是按照键值对的方式读取
存储时:localStorage[key] = value;
读取时:value=localStorage[key];
保存后,即使页面关闭,下次打开页面也可以直接读取;缺点是并非保存文件,无法直接访问。
Ref: http://www./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部分是:
.html .txt
其缺点是浏览器的支持不好,我用的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/
其中讲解很详细,不过读文件时用的是读图片。这里贴一份读文本的代码
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); } var btn=document.getElementById('file'); btn.addEventListener('change', handleFileSelect, false);
读文件用到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文件:
代码参考:
http://www./zoho/archive/2012/05/27/2520468.html
File API 这种方法,IE和Chrome皆可行。
Ref: http://www.w3.org/TR/FileAPI/