使用javascript读写本地文件的方法
近期在全身心做毕业设计,我需要做的项目类似于迷宫搜索,为了显示算法运行时的效果,采用了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 objectif(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读写本地文件的方法相关推荐
- html js引用本地资源,了解使用JavaScript读取本地文件的方法
本篇文章给大家介绍一下使用JavaScript读取本地文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件.如 ...
- chrome html 读写文件路径,Chrome浏览器支持直接读写本地文件了
本文首发于公众号:符合预期的CoyPan 写在前面 最新版的Chrome(Chrome 83, 须要开启权限)支持直接读写本地文件了.javascript 开启方法:Chrome浏览器升级到83版本以 ...
- JavaScript读写.txt文档 - 方法篇
JavaScript读写.txt文档:分析与方法 详情参考完整教程: Javascript本地写入txt和读取txt文件示例 案例篇:求HTML或者JS读取TXT文件内容的代码 以上就是关于 &quo ...
- cordova js(javascript)读取本地文件(将本地的bin文件转成字节数组)
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件 文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...
- python保存数据到本地文件_python保存数据到本地文件的方法
python保存数据到本地文件的方法 1.保存列表为.txt文件 #1/list写入txt ipTable = ['158.59.194.213', '18.9.14.13', '58.59.14.2 ...
- python读取csv文件的方法-python读写csv文件的方法
1.爬取豆瓣top250书籍 import requests import json import csv from bs4 import BeautifulSoup books = [] def b ...
- python导入excel文件-python使用xlrd模块读写Excel文件的方法
本文实例讲述了python使用xlrd模块读写Excel文件的方法.分享给大家供大家参考.具体如下: 一.安装xlrd模块 到python官网下载http://pypi.python.org/pypi ...
- JAVA编程TXT文件_java读写txt文件的方法
java读写txt文件的方法 发布时间:2020-06-26 15:54:02 来源:亿速云 阅读:111 作者:Leah 本篇文章为大家展示了java读写txt文件的方法,代码简明扼要并且容易理解, ...
- 【转】C++读写.mat文件的方法
原文地址:https://www.jb51.net/article/34727.htm C++读写.mat文件的方法 转载 更新时间:2013年03月13日 10:31:28 作者: 我要评 ...
最新文章
- 【通俗理解线性代数】 -- 矩阵的等价与相似
- R语言广义线性模型Logistic回归模型亚组分析及森林图绘制
- 嵌入式Linux常用文件系统
- vs2013 openmp例子
- C语言扫雷游戏简单实现
- python英文文献翻译_科研神器(1)——python实现自动读取英文文献翻译并生成综述...
- Batch Normalization的一些缺陷
- 2101 Problem A Snake Filled
- [转]Oracle销售人员普遍腐败?
- iOS bugly集成报错
- 一个完整的爬虫入门程序
- 浙江大学计算机专业选考要求,浙大等招办主任解读2020年选考科目要求!各专业有调整!...
- 第八章 DirectX 3D模型加载和骨骼动画(上)
- python输入一段英文_编写程序,用户输入一段英文,然后输出这段英文中所有长度为 3 个字母的单词。_学小易找答案...
- 基于白鲸优化算法的函数寻优算法
- 用计算机修改图片或照片,如何利用电脑自带的画图工具修改图片的基本属性
- 蓝牙耳机什么牌子好?性价比最高的蓝牙耳机排行榜
- php日历天气预报下载安装手机桌面_日历天气预报下载安装-日历天气预报 安卓版v1.2-PC6安卓网...
- 葫芦岛php,葫芦岛php培训
- 保弘实业|个人理财如何才能做到收益最高
热门文章
- android 仿360浮动,Android仿360悬浮小球自定义view实现示例
- 数字化转型大咖群研讨实录20210506
- 品酒论三国之一(把梳子卖给和尚)
- 计算机左边不显示桌面按键,显示桌面图标不见了怎么办?快捷键是什么?电脑开机不显示桌面。...
- 网页用户登录权限校验的两种实现方式
- Java语言程序设计 例题5.4(英里和公里的转化)
- 云数据中心与传统数据中心
- 计算机专业浅谈:都说这行业35岁失业,是真的嘛?
- python 创建一定区间内的满足正态分布的随机数
- Workrave怎么用 Workrave使用方法, Workrave 健康计时器,预防电脑长期操作的职业病伤害...