前端实现将数据保存到本地

先上效果图

在这里插入图片描述

需求:

有时我们(前端)需要将某个数据如:(JSON、数组以及一些其它数据)保存到本地文件(xxx.json、xxx.txt、…),

实现原理:

通过a标签实现

实现方式:

  • 方式一、通过html(注:在vue等响应式框架中适用)
//格式
<!-- <a :href="'data:text/json;charset=utf-8,'+JSON.stringify(要保存的数据)" download='文件名.后缀名'>下载数据</a> -->
//示例
<a :href="'data:text/json;charset=utf-8,'+JSON.stringify(dataJson)" download='data.txt'>下载数据</a>
  • 方式二、通过js操作dom实现(注:需在能操作dom的场景中使用)
const domObj = document.createElement('a');
domObj.setAttribute('href', 'data:text/json;charset=utf-8,' + encodeURIComponent('hello world'));//注:如存储数组 or JSON需将其转换为JSON字符串
domObj.setAttribute('download', 'data.txt');
if (document.createEvent) {
	const event = document.createEvent('MouseEvents');
	event.initEvent('click', true, true);
	domObj.dispatchEvent(event);
} else {
	domObj.click();
}
Logo

前往低代码交流专区

更多推荐