斗鱼扩展--localStorage备份与导出

Posted 2020-12-29 likehc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了斗鱼扩展--localStorage备份与导出相关的知识，希望对你有一定的参考价值。

之前我们都把数据放在了 localStorage 里，但扩展一旦卸载，数据就会被清空，

在Console里备份，一次只能输出一条，小白操作起来很不方便，所以能不能导入，导出文件来进行备份还原呢？

这里的用到FileReader 这个类，还有一个FileSaver.js ，开源的网上能下载到。

导入导出核心代码如下

技术分享图片

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7     <input type="file" id="input">导入配置文件    </br>    
 8     <textarea id="inputdata" placeholder="显示导入数据"></textarea></br>
 9     <input type="button" id="output" value="导出"/>
10 </body>
11 <script src="FileSaver.min.js"></script>
12 <script type="text/javascript">
13 // 导入
14 document.getElementById("input").addEventListener("change", function(e){
15     var file=e.target.files[0];
16     var reader = new FileReader();
17     reader.onload = function(e){
18         document.getElementById("inputdata").value =e.target.result;        
19     };
20     reader.readAsText(file);
21 });
22 //导出
23 document.getElementById("output").onclick = function(){
24     var content ="我是要保存的字符串";    
25     var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
26     saveAs(blob, "save.txt");
27 };
28 </script>
29 </html>