目录
钥匙要点
移动浏览器:
谁在使用本地存储?
私有浏览的注释
>可以在子域之间共享本地存储吗?
可以在不同的浏览器之间传输本地存储数据吗?
>如何处理本地存储配额超过错误?
首页 web前端 js教程 HTML5本地存储重新审视

HTML5本地存储重新审视

Feb 20, 2025 am 09:37 AM

HTML5本地存储重新审视

钥匙要点

    Web Storage API的一部分
  • HTML5本地存储允许在浏览器中存储数据存储,其容量为2MB至10MB,具体取决于浏览器,协议,端口和顶级域。与cookie不同,此数据未发送回服务器,并在会话和设备之间持续持续。
  • >
  • >由于本地存储的同步性可能会受到性能,但它的速度可能比移动设备上的本机缓存更快。为了优化性能,建议限制读取,仅在窗口之后访问本地存储。
  • >并非所有浏览器都支持在私人或隐身模式下本地存储中设置项目,在某些情况下,退出后,以私有模式存储的数据被清除。为了确保安全使用本地存储,建议不仅要测试支持,还建议获得和设置物品的能力。>
>本地存储是HTML5 Web Storage API的一部分,它允许您将数据存储在浏览器中。与cookie不同,使用本地存储存储的数据不会发送回服务器。所有数据都停留在客户端上,您当前可以存储从2MB到10MB。此限制与使用的特定浏览器,协议(HTTP或HTTPS),端口和最高级别域相关。> 在本文中,我们将讨论如何使用此API来提高网站的性能。我会假设您知道什么是本地存储和暴露的方法,但是如果您需要复习,我建议您阅读Colin Ihrig的Web Storage API概述。

可用的磁盘空间

>在开始讨论本地存储之前,我想概述大型移动设备和桌面浏览器中可用的磁盘空间。以下表是基于文章“在移动浏览器上使用配额”。

移动浏览器:

浏览器 chrome android浏览器 firefox > ios Safari 版本 40 4.3 34 6-8 可用空间 10MB 2MB 10MB 5MB 桌面浏览器:

浏览器 chrome > Opera firefox > Safari > Internet Explorer 版本 40 27 34 6-8 9-11 可用空间 10MB 10MB 10MB 5MB 10MB >本机缓存vs本地存储

使用本地存储时,您的数据将留在客户端上,并在会话和设备重新启动之间持续使用。正如我在简介中提到的那样,本地存储API的限制与特定浏览器(如上一个表中所示),协议,端口和最高级别域相关。相比之下,浏览器本机缓存上可用的空间在网站上共享,并且在移动设备上较小。它经常被冲洗,有时甚至在同一访问中。移动设备还有一个其他问题:它们不如桌面设备强大,因此必须实现良好的性能。

>关于本地存储性能的讨论很多。例如,以前与莫齐拉(Mozilla)一起写的克里斯蒂安·海尔曼(Christian Heilmann)写道:“没有简单的解决方案用于本地存储”。如果不仔细使用,本地存储可能会受到性能的打击。您需要考虑的第一件事是它是同步API,因此它阻止了主UI线程。本地存储写入并读取来自硬盘驱动器的数据,这比从内存中阅读要贵得多。为了使您访问数据,本地存储需要从磁盘中读取数据,这就是性能命中的地方。这种性能命中并不是少量数据的主要问题,但是使用完整的存储限制可以很明显。

作为一个很好的做法,您应该尝试执行尽可能少的读取。另外,由于我们正在处理同步API,因此您应该尝试仅在窗口启动窗口后才从本地存储中读取数据,以避免阻止UI线程。

事物已经改变

>但是情况越来越好。 Mobify的Peter McLachlan发表的一篇文章解释说,本地存储的速度比移动设备上的本机缓存快5倍。

在同一篇文章的附录中,您可以看到移动浏览器上本地存储的性能的演变以及它的改进程度。您还可以看到本地存储始终比本机缓存更快。

谁在使用本地存储?

>

>最近有一些网站使用本地存储来缓存资产,例如使用本地存储进行关键路径CSS的监护人。您可以在2014年速度会议上查看此演示文稿,以了解他们如何做到这一点。

>最近也开始在本地存储中加入Web字体。在本文有关最近在其网站上实施的一些绩效改进的文章中,他们报告了推迟的网络字体并将其缓存在当地存储中,这导致了最有效的改进。

>

私有浏览的注释

如Caniuse.com在“标签已知问题”上报道的,在以私有或隐身模式运行时,Safari,ios Safari和Android浏览器不支持在本地存储中设置项目。

>

>其他浏览器(例如Chrome和Firefox)允许您在私有模式下将数据存储在本地存储中,但是当您退出专用模式时,将清除数据。这是由于隐私问题造成的,因为在私有模式下,有人可能会使用持久数据来了解用户的操作。

如果预计将在随后的访问中出现在上一个会话下的值下,则此问题可能会破坏您的应用程序的行为。因此,为了安全地使用本地存储,这不仅是测试支持的好习惯,而且是测试获取和设置项目的能力。

>

>有关在私有模式下的本地存储行为以及如何在不同浏览器中查看本地存储内容的更多信息,您可以使用“在测试时不要忘记检查私人浏览模式”作为参考。

>

结论

也许是时候开始重新审视本地存储及其潜在用途了,尤其是在可以使用它来避免延迟瓶颈的移动设备上。我们可以开始考虑缓存我们的资产的新方法,然后立即将其提供给我们的用户。我们已经看到已经以非常规的方式成功实现了本地存储使用。

经常询问有关HTML5本地存储的问题(常见问题解答)

> HTML5本地存储的最大存储限制是多少?但是,大多数现代浏览器每个域提供约5MB的存储空间。这明显大于cookie提供的4KB(约4096个字节)。重要的是要注意,此存储是每个域,而不是每个本地存储对象。>如何检查浏览器是否支持HTML5本地存储?

>您可以通过在JavaScript中使用“ IN”运算符来检查浏览器是否支持HTML5本地存储。这是一个简单的代码段,检查本地存储支持:

if(window && window中的'localStorage'&& window ['localStorage']!== null){ //支持本地存储
> } else {
//不支持本地存储
}

}

>如何从HTML5本地存储中清除数据?

>您可以使用clear()方法从HTML5本地存储中清除数据。此方法从当前域的本地存储中删除了所有键值对。这是一个简单的代码片段:

localstorage.clear();

>我可以存储对象或数组中的html5 local Storage中吗?

是的,您可以将对象或数组存储在HTML5本地存储。但是,本地存储仅支持字符串键值对。因此,您需要在存储之前使用json.stringify()将对象或数组转换为字符串,然后在检索时使用json.parse()将其转换回对象或数组。本地存储和会话存储之间的区别?

>本地存储和会话存储之间的主要区别在于其寿命和范围。即使关闭浏览器并重新打开浏览器,本地存储中的数据仍然存在,而页面会话结束时会话存储中的数据将被清除,即当关闭浏览器时。>我如何迭代本地中的所有值存储?

您可以使用简单的循环与localstorage.key()方法和localStorage.getItem()结合使用for Loop()迭代本地存储中的所有值方法。

>可以在子域之间共享本地存储吗?

不,不,在子域之间无法共享本地存储。每个子域都有其自己的独立本地存储。

可以在不同的浏览器之间传输本地存储数据吗?

不,不能在不同的浏览器之间传输本地存储数据。每个浏览器都有其自己的独立本地存储。

>

>如何处理本地存储配额超过错误?

当超​​过本地存储配额时,抛出了quota_exceeded_err异常。您可以通过将其捕获在试用块中并采取适当的措施来处理此异常,例如清除某些空间或通知用户。

>

以上是HTML5本地存储重新审视的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1276
29
C# 教程
1256
24
Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中:现实世界中的示例和项目 JavaScript在行动中:现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎:实施详细信息 了解JavaScript引擎:实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:社区,图书馆和资源 Python vs. JavaScript:社区,图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript:开发环境和工具 Python vs. JavaScript:开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C/C在JavaScript口译员和编译器中的作用 C/C在JavaScript口译员和编译器中的作用 Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

从网站到应用程序:JavaScript的不同应用 从网站到应用程序:JavaScript的不同应用 Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

See all articles