之前我们都把数据 放在了 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备份与导出(九)的更多相关文章

  1. mongodb 备份 还原 导出 导入

    张映 发表于 2013-12-03 分类目录: nosql 标签:mongodb, 备份, 导入, 导出, 还原 mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mong ...

  2. CSDN博客文章的备份及导出电子书CHM

    需要用到的工具集合下载:http://download.csdn.net/source/2881423 在CSDN.百度等写博客文章的应该很多,很多时候担心服务器有一天突然挂了,或者担心自己的号被封了 ...

  3. mongodb 数据库操作--备份 还原 导出 导入（转）

    mongodb 数据库操作--备份 还原 导出 导入   -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport ...

  4. 斗鱼扩展初识Chrome扩展(一)

    看斗鱼有些时间了,也写了不少辅助的js,但是昨天不小心把硬盘分区表搞没了,自己写了好久的代码不见了,DiskGenius 也没恢复成功,所以要重写一次,大家要引以为鉴,常备份代码,github是个不错 ...

  5. mongodb数据库备份导入导出数据

    备份数据: mongodump -h 192.168.2.20 -u game -p 12345678 -d dbname -o /data/test/ --excludeCollection=use ...

  6. mongodb 数据库操作--备份 还原 导出 导入

    mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mongorestore,一种是针对库中表的mongoexport和mongoimport 一,mongodump备份数据 ...

  7. mongodb数据库操作--备份 还原 导出 导入

    首先数据库备份: mongodump -h IP --port 端口 -u 用户名 -p 密码 -d 数据库 -o 文件存在路径  mongodump -h 127.0.0.1 -u admin -p ...

  8. 推荐一款自己的软件作品[豆约翰博客备份专家]，新浪博客，QQ空间，CSDN，cnblogs博客备份，导出CHM,PDF(转载)

    推荐一款自己的软件作品[豆约翰博客备份专 豆约翰博客备份专家是完全免费,功能强大的博客备份工具,博客电子书(PDF,CHM和TXT)生成工具,博文离线浏览工具,软件界面美观大方,支持多个主流博客网站( ...

  9. mongodb远程数据库的连接以及备份导入导出数据

    环境win10; 运行cmd cd到目录mongodb的bin目录: 连接远程mongodb: 连接命令:mongo -u username -p pwd host:post/database(数据库 ...

随机推荐

  1. 基于pythpn的深度学习 - 记录

    [基于pythpn的深度学习] 环境:    windows/linux-ubuntu    Tensorflow (基于anaconda)        *安装 (python3.5以上不支持)   ...

  2. java基础之变量和常量、类型转换

    一.     变量 变量是可改变的量,每赋个值便会开辟一个新内存地址. 1.首先,变量需要一个声明,例如:int a,这个a也可以当作是一个标签,它指向了一个内存地址,这个地址是属于int类型的套餐, ...

  3. CentOS7l联网

    原文:https://blog.csdn.net/nothing2017/article/details/61420767 步骤: 1.以root管理员身份登录系统,输入   --->(ls / ...

  4. mysql 模糊查询 concat()

    concat() 函数,是用来连接字符串. 精确查询: select * from user where name=”zhangsan” 模糊查询: select * from user where ...

  5. Linux安全加固--系统相关

    一.系统相关 1.系统关键文件设置 1.1.设置文件初始权限 设置默认的umask值,增强安全性. [root@localhost ~]# umask 0022 /etc/profile最下面添加一行 ...

  6. C#是类型安全语言

    C#是一种类型安全语言:所有的表达式都解析成某个类型的一个实例,在编译器生成的代码中,只会执行对这个类型来说有效的操作. [优势] 许多错误能在编译时就检测到,确保代码在执行这段代码前是正确的: 生成 ...

  7. Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

    昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...

  8. linux学习3(vim)

    一.文档编辑 1. vi和vim命令 Vim的打开文件的方式(4种,要求掌握的就前三种): 1. vim 文件路径                                            ...

  9. Go语言基础之12--Channel

    一.不同goroutine之间如何进行通讯? 1.全局变量和锁同步 缺点:多个goroutine要通信时,定义太多的全局变量(每个全局变量功能不一样),不好维护 2.Channel 二.channel ...

  10. IDEA中如何添加jar包

    File -> Project Structure -> Libraries -> + -> jar -> 选择classes