在 Web 开发中，我们经常需要为用户提供表单来收集数据。但是，对于那些使用移动网络或者拥有有限数据套餐的用户来说，表单的数据传输可能会导致很高的数据使用量和费用。为了在保证服务质量的同时避免给用户带来过高的经济负担，Chrome 浏览器推出了“节省数据模式”。而 npm 包 save-data-form 则可以帮助我们在 Web 表单中使用这一功能。
安装
在使用 save-data-form 之前，我们需要首先通过 npm 包管理器将其安装到我们的项目中：
npm install save-data-form --save
使用
在表单中启用节省数据模式
将 data-saver 属性添加到表单元素上：
<form data-saver> <!-- 表单项… --> </form>
这样，当用户启用节省数据模式时，Chrome 浏览器将会自动对该表单启用“节省数据模式”。
检测节省数据模式是否启用
通过以下代码，我们可以检查用户是否在使用节省数据模式：
if (window.navigator.connection.saveData) {
console.log('用户正在使用节省数据模式！');
}发送优化过的表单数据
我们可以使用 save-data-form 包的 sendData 函数来发送被优化过的表单数据：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
----- ---- - -------------------------------
------------------------------- ------- -- -
-----------------------
----- -------- - --- ---------------
------------------
---------------- -- -
-------------------------
--
-------------- -- -
---------------------
---
---额外的参数配置
saveDataForm 函数可以接收一个 Object 参数：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
--------------
-- ---------------------- ------ ----
-------------- -----
-- ----------------------- - -
----------- --
-- -------------
------------- -
------------ ----------
----- -------
--
-- --- ---------- ------------------------
----------- ------ -- -
------------------------ ------
-
---总结
通过使用 npm 包 save-data-form，我们能够更好地支持那些使用移动网络或有限数据套餐的用户。我们能够在表单中使用节省数据模式，检测用户是否开启了这一功能，以及发送被优化过的表单数据。而额外的参数配置使得我们能够更加灵活地使用 save-data-form 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553cb81e8991b448d10e7