在开发基于 HTML5 技术的前端应用时，有时候需要使用本地存储来保存用户数据。然而，HTML5 提供的本地存储容量是有限的，且在不同设备上的限制也各不相同。
例如，在 iPad 上，Safari 浏览器默认情况下为每个域名提供了 5MB 的本地存储空间。但是，有些网站或应用程序可以通过某种方式来请求增加存储空间的大小，比如 Financial Times 网站的 Web 应用。那么，我们该怎样实现这个功能呢？
实现方法
要请求增加 HTML5 localstorage 的大小，需要使用 window.webkitStorageInfo.requestQuota() 方法。该方法接受三个参数：
type：存储类型，目前只支持TEMPORARY和PERSISTENT两种。size：申请的存储空间大小，单位为字节。successCallback：存储空间分配成功后的回调函数。
下面是一个示例代码：
-- -------------------- ---- -------
--------------------------------------
------------------
---- - ---- - --- -- -- ---- -----
---------------------- -
---------------- - - ------------ - - ----------
--
--------------- -
------------------------- - -------
-
--上述代码中，我们使用 window.PERSISTENT 指定了持久化存储类型，并申请了 50MB 的存储空间。在成功分配存储空间后，会调用回调函数并输出已分配字节数；如果分配失败，则会输出错误信息。
注意事项
需要注意的是，请求增加 HTML5 localstorage 的大小必须在用户与页面交互的过程中进行。否则，浏览器将拒绝申请，并报错“QuotaExceededError”。
因此，在实现时需要先检查是否可以使用 window.webkitStorageInfo 对象。如果不支持，则需要使用旧版的 window.localStorage 对象来存储数据，但要注意容量限制。
下面是一个示例代码：
-- -------------------- ---- -------
-- -------------------------- -
-------------------------------------------
- ---- -- --------------------- -
--- ----------- - ---- - ---- - -- -- ---- --- ----
--- -
---------------------------- -------------------------
- ----- ------- -
----------- - ----------------------- - -- - -------------------- - ----
------------------------------ - - ----------- - - ----------
------------------- -- ------
-
-在上述代码中，我们先检查浏览器是否支持 window.webkitStorageInfo 对象。如果支持，则使用该对象申请存储空间；否则，使用 window.localStorage 对象并设置初始的存储空间大小为 5MB。
由于 localStorage.setItem() 方法会抛出异常，当存储空间不足时，我们可以通过递归调用自身来重新分配存储空间，并将新的存储空间大小设置为原大小的一半。
结论
本文介绍了如何在 iPad 上请求增加 HTML5 localstorage 的大小，并提供了示例代码。但是，在实际开发中还需根据具体情况进行优化和调整，以确保应用程序能够正常工作并达到最佳性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29661