使用localStorage进行本地存储代码
来源:互联网 发布:xp网络连接图标不见了 编辑:程序博客网 时间:2024/06/02 02:26
localStorage的使用方法见:
http://blog.csdn.net/pedrojuliet/article/details/62889501
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,minimum-scale=1.0"> <title>FileReader</title></head><body> <div id="file-div"> <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown" /> <textarea name="filereader" placeholder="......."></textarea> <button type="button" name="storebutton">本地存储</button> <button type="button" name="clearbutton">清除存储</button> </div> <script> window.onload = function(){ var text = document.getElementsByName('filereader')[0], inputFile = document.getElementsByName('inputfile')[0], storeButton = document.getElementsByName('storebutton')[0], clearButton = document.getElementsByName('clearbutton')[0]; // 检测localStorage中是否已有缓存 if(window.localStorage.getItem('textareaStorage')) { alert('检测到本地存储的文件,已为您自动恢复'); text.value = window.localStorage.getItem('textareaStorage'); } //上传文件 inputFile.onchange = function(){ console.log(this.files); var reader = new FileReader(); reader.readAsText(this.files[0], 'UTF-8'); reader.onload = function (e) { // urlData就是对应的文件内容 var urlData = this.result; text.value = urlData; }; }; // 存储文件 storeButton.onclick = function(){ window.localStorage.setItem('textareaStorage', text.value); alert('保存成功'); }; // 清除存储 clearButton.onclick = function(){ window.localStorage.removeItem('textareaStorage'); alert('清除成功'); }; }; </script></body></html>
阅读全文
0 0
- 使用localStorage进行本地存储代码
- 实例以及详解localStorage进行本地存储
- [HTML] 使用HTML5的本地存储localStorage
- [HTML] 使用HTML5的本地存储localStorage
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5 LocalStorage本地存储和sessionStorage使用
- html5本地存储-sessionStorage,localStorage的使用
- Angular2 本地存储LocalStorage的使用
- HTML5的本地存储功能,使用localStorage
- HTML5本地存储localStorage、sessionStorage的使用
- HTML5 LocalStorage本地存储和sessionStorage使用
- LocalStorage本地存储扩展使用,本代码基于ng,如果需要可以直接取。
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- localStorage用于本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- Redis的常用命令
- MT6735 Battery充电开关
- 2017 组队赛补题
- 笨办法学python ex21-26
- Opencv3.0各种机器算法总结
- 使用localStorage进行本地存储代码
- CentOS下VMware用桥接模式,静态ip上外网
- Redis数据类型list类型常用命令
- HTTP协议知多少-关于http1.x、http2、SPDY的相关知识
- 使用性能API快速分析web前端性能
- 《数据库SQL实战》查找当前薪水详情以及部门编号dept_no
- HTTP协议解析
- tensorflow库和numpy库中的相关函数
- 综合收集