目录
钥匙要点
移动浏览器:
谁在使用本地存储?
私有浏览的注释
>可以在子域之间共享本地存储吗?
可以在不同的浏览器之间传输本地存储数据吗?
>如何处理本地存储配额超过错误?
首页 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

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

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

See all articles