斗鱼扩展--localStorage备份与导出(九)
之前我们都把数据 放在了 localStorage 里，但扩展一旦卸载，数据就会被清空，
在Console里备份，一次只能输出一条，小白操作起来很不方便，所以能不能 导入，导出文件来进行备份还原呢？
这里的用到FileReader 这个类，还有一个FileSaver.js ，开源的网上能下载到。
导入导出 核心代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="file" id="input">导入配置文件 </br>
<textarea id="inputdata" placeholder="显示导入数据"></textarea></br>
<input type="button" id="output" value="导出"/>
</body>
<script src="FileSaver.min.js"></script>
<script type="text/javascript">
// 导入
document.getElementById("input").addEventListener("change", function(e){
var file=e.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("inputdata").value =e.target.result;
};
reader.readAsText(file);
});
//导出
document.getElementById("output").onclick = function(){
var content ="我是要保存的字符串";
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "save.txt");
};
</script>
</html>
遍历 localStorage
for (var i = 0; i < localStorage.length; i++) {
console.log( localStorage.key(i) + ":" + localStorage.getItem(localStorage.key(i)));
}
注意那个那个localStorage.key(i) 是圆括号，不是方括号[i]
遍历之后 组成字符串，导出成备份文件，然后导入就写入 localStorage相应位置，这样就方便多了。
开启 扩展 “选项”模式，
"options_page": "options.html",
options ,popup ,可以在其页面内调用 background 的方法，如
var bg = chrome.extension.getBackgroundPage();
var msg = bg.msg; //获取变量
bg.func(); //调用方法
然后把上面 说的功能 加到扩展里去。。用户就有更多的修改空间了
斗鱼扩展--localStorage备份与导出(九)的更多相关文章
- mongodb 备份 还原 导出 导入
张映 发表于 2013-12-03 分类目录: nosql 标签:mongodb, 备份, 导入, 导出, 还原 mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mong ...
- CSDN博客文章的备份及导出电子书CHM
需要用到的工具集合下载:http://download.csdn.net/source/2881423 在CSDN.百度等写博客文章的应该很多,很多时候担心服务器有一天突然挂了,或者担心自己的号被封了 ...
- mongodb 数据库操作--备份 还原 导出 导入（转）
mongodb 数据库操作--备份 还原 导出 导入 -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport ...
- 斗鱼扩展初识Chrome扩展(一)
看斗鱼有些时间了,也写了不少辅助的js,但是昨天不小心把硬盘分区表搞没了,自己写了好久的代码不见了,DiskGenius 也没恢复成功,所以要重写一次,大家要引以为鉴,常备份代码,github是个不错 ...
- mongodb数据库备份导入导出数据
备份数据: mongodump -h 192.168.2.20 -u game -p 12345678 -d dbname -o /data/test/ --excludeCollection=use ...
- mongodb 数据库操作--备份 还原 导出 导入
mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mongorestore,一种是针对库中表的mongoexport和mongoimport 一,mongodump备份数据 ...
- mongodb数据库操作--备份 还原 导出 导入
首先数据库备份: mongodump -h IP --port 端口 -u 用户名 -p 密码 -d 数据库 -o 文件存在路径 mongodump -h 127.0.0.1 -u admin -p ...
- 推荐一款自己的软件作品[豆约翰博客备份专家]，新浪博客，QQ空间，CSDN，cnblogs博客备份，导出CHM,PDF(转载)
推荐一款自己的软件作品[豆约翰博客备份专 豆约翰博客备份专家是完全免费,功能强大的博客备份工具,博客电子书(PDF,CHM和TXT)生成工具,博文离线浏览工具,软件界面美观大方,支持多个主流博客网站( ...
- mongodb远程数据库的连接以及备份导入导出数据
环境win10; 运行cmd cd到目录mongodb的bin目录: 连接远程mongodb: 连接命令:mongo -u username -p pwd host:post/database(数据库 ...
随机推荐
- 浅聊本人学习React的历程——第一篇生命周期篇
作为一个前端小白,在踏入前端程序猿行业的第三年接触了React,一直对于框架有种恐惧感,可能是对陌生事物的恐惧心里吧,导致自己一直在使用原生JS和JQ作为开发首选,但是在接触了React之后,发现了其 ...
- 静态-static
静态 1. 静态初始化块 (1)可初始化类的静态字段 (2)静态初始化块只调用一次 (3)创建子类时会调用父类的静态初始化块 源代码: class Root { static{ System.out. ...
- linux 学习文档
1.nginx中文文档 http://www.nginx.cn/doc/
- IDEA 基本操作
1.IDEA 编译的JDK问题 点击出错的模块 将这个改成8,但是改了这个还是不行,项目一编译他有回去了. 正确的做法: 在跟pom.xml 中增加如下代码: <build> <pl ...
- History命令用法15例
以下内容为转载: 如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率.本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTT ...
- 平衡树学习笔记（3）-------Splay
Splay 上一篇:平衡树学习笔记(2)-------Treap Splay是一个实用而且灵活性很强的平衡树 效率上也比较客观,但是一定要一次性写对 debug可能不是那么容易 Splay作为平衡树, ...
- [SHOI2002]百事世界杯之旅
题目:"--在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听,更克赴日韩观看世界杯. ...
- Xcode的编辑利器Xvim，如何去掉烦人工具栏和文件路径
最近网上看到了一篇关于Xcode的编辑利器,因为以前做FPGA工作时候在ISE SDK下用过vim作为编辑器,所以深知vim的强大,所以安装Xvim: 在安装之后遇到一些配置问题,因为本来就完美控制, ...
- 【Leetcode】Remove Duplicates from Sorted List II
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- Mineweep（扫雷）
题目描述: 每周一题之2 Mineweep(扫雷) Minesweeper (扫雷) PC/UVa IDs: 110102/10189, Popularity: A, Success rate: h ...