原生JS向本地写入和保存数据

/*js是不可以直接向本地文件写入数据的(浏览器为保护本地文件而不允许!)*/

/*但是我么可以通过另外一种方式来写入并存储数据*/

首先得引入一个 FileSaver.js 文件;

然后参考下面的代码:(主要是单击事件里面的代码,这是官方的说明!)

<input type="text">
    <input type="button" value="submit">
    <script src="FileSaver.js"></script>
<script>
var btn = document.querySelector('input[type="button"]');
btn.οnclick=function(){
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
};
</script>

引入的js文件:

https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js




  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用原生的 JavaScript 来将数据写入 JSON 文件中。以下是一种常见的方法: 1. 首先,您需要将数据转换为 JSON 字符串。您可以使用 `JSON.stringify()` 方法来实现这一点。 ```javascript var data = { name: "John", age: 30, city: "New York" }; var jsonData = JSON.stringify(data); ``` 2. 然后,您可以使用浏览器提供的 `Blob` 对象和 `URL.createObjectURL()` 方法来创建一个可以保存的 URL。 ```javascript var blob = new Blob([jsonData], { type: "application/json" }); var url = URL.createObjectURL(blob); ``` 3. 接下来,您可以创建一个 `<a>` 标签,并设置其 `href` 属性为刚刚创建的 URL。然后,您可以使用 `setAttribute()` 方法将其下载属性设置为要保存的文件名。 ```javascript var link = document.createElement("a"); link.href = url; link.setAttribute("download", "data.json"); ``` 4. 最后,您可以使用 `click()` 方法模拟用户点击下载链接,将数据保存JSON 文件。 ```javascript link.click(); ``` 完整的示例代码如下所示: ```javascript var data = { name: "John", age: 30, city: "New York" }; var jsonData = JSON.stringify(data); var blob = new Blob([jsonData], { type: "application/json" }); var url = URL.createObjectURL(blob); var link = document.createElement("a"); link.href = url; link.setAttribute("download", "data.json"); link.click(); ``` 通过运行上述代码,您将生成一个名为 "data.json" 的 JSON 文件,其中包含您的数据。当用户点击下载链接时,浏览器将提示他们保存文件。 请注意,这种方法只适用于浏览器环境,无法直接在服务器端写入 JSON 文件。如果您需要在服务器端写入 JSON 文件,请考虑使用适用于您的服务器端技术栈的文件操作方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值