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

使用javascript读写本地文件的方法近期在全身心做毕业设计,我需要做的项目类似于迷宫搜索,为了显示算法运行时的效果,采用了javascript来写(使用canvas来画图)。其中一个功能是把js代码随机生成的迷宫保存到本地文件中,方便下次读取。一般来说,由于安全因素,javascript写文件到操作系统文件中是不推荐的,不还还是搜索到了一些方法,这里总结一下:【方法一】localStoragelocalStorage

近期在全身心做毕业设计,我需要做的项目类似于迷宫搜索,为了显示算法运行时的效果,采用了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="#" οnsubmit="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" οnclick="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" οnclick="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/

今天的文章使用javascript读写本地文件的方法分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/4956.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注