当前位置: 首页 > 科技观察

关于HTML5LocalStorage的五个不为人知的事实

时间:2023-03-16 11:33:02 科技观察

LocalStorage是HTML5中的一个方便的API,它为Web开发人员提供了易于使用的5MB存储空间。使用LocalStorageAPI真的再简单不过了。不信你看一看://SaveavaluetolocalStoragelocalStorage.setItem('key','valuetosave');//ORlocalStorage.key='stringvaluetosave';//获取valuebackoutlocalStoragelocalStorage.getItem('key');//或localStorage.key;//清除所有localStorage的值localStorage.clear();localStorageAPI非常简单,但很容易忽略有关它们的一些重要细节。关于这个简单的API,您可能不知道(或忘记)以下五件事:1.安全(SSL)页面上的LocalStorge值是隔离的(也称为HTML5Origin)隔离LocalStorage值。主机名隔离是我们所期望的,因为我们不希望恶意网站访问我们网站的LocalStorage数据。但是为什么协议是隔离的(即http和https)?这种隔离的结果就是保存到http://htmlui.com的LocalStorage的值无法从https://htmlui.com的页面访问到(反之亦然)。因此,如果您的网站同时提供HTTP和HTTPS页面,请务必小心。(注意:Firefox提供了专有的GlobalStorage,它没有这种HTTP/HTTPS隔离。)2.某些浏览器重启后SessionStorage值仍然存在。与LocalStorage不同,SessionStorage不是为在用户浏览器中长期存储而设计的。为价值而设计。相反,SessionStorage中的值在浏览器会话结束时被销毁,这通常是在浏览器窗口关闭时。不过有一个例外。当浏览器提供“恢复会话”功能时,通常旨在帮助用户从浏览器/计算机崩溃中快速恢复,SessionStorage中的值也会被恢复。因此,虽然它是服务器上的一个新“会话”,但从浏览器的角度来看,它是跨浏览器重新启动的单个会话的延续。这使得SessionStorage成为临时“备份”用户表单值、在输入时将输入保存到SessionStorage并在页面加载时恢复它(如果存在)以进一步帮助用户从浏览器崩溃或页面刷新时意外恢复中恢复的理想存储技术(虽然浏览器自己做了一些,尤其是从崩溃中恢复时)。3.在“incognito”模式下创建的LocalStorage值被隔离值创建一个新的临时数据库。这意味着当隐私浏览会话关闭时,保存到LocalStorage的任何内容都将被销毁,从而使LocalStorage的行为更像SessionStorage。另外,由于浏览器的“sessionresume”功能不会重新开启privatemodesession,所以浏览器窗口关闭后在SessionStorage中创建的任何内容也会丢失。其实简而言之,任何在关闭期间放入Local或SessionStorage的数据aprivatebrowsingsession会在浏览中丢失4.LocalStorage配额不能大于5MBLocalStorage不应该是HTML5浏览器存储的主要形式(IndexDB是),但有些应用可能需要LocalStorage提供超过5m的内存。是有办法扩大LocalStorage配额吗?“不不不,别想了,你在想桃花”。但是有一个并排!从技术上讲,LocalStorage不会阻止同一主机的子域(使用相同的协议和端口)访问他的LocalStorage对象。因此,一些浏览器公开了一种解决方法,即授予“a1.website.com”和“a2.website.com”它们自己的5MBLocalStorage配额。由于两个站点都位于同一来源,因此它们可以访问彼此的值。(安全说明:这也意味着共享域上的站点,例如apphost.com,都共享一个HTML5存储对象。小心!)因此,虽然存在技术解决方法,但在HTML5Web存储规范中明确弃用了它。.但到目前为止只有Opera实现了这部分规范。所以现在,5MB是您的现实限制。5.LocalStorage可以填入旧浏览器(包括IE)。旧浏览器(尤其是LeseIE浏览器)是每一次HTML5派对的输家。幸运的是,高级浏览器对LocalStorage的支持非常好。它在IE8+(!)、Firefox3.5+和Chrome4+中原生运行。很少有HTML5规范像WebStorage那样享有广泛和一致的支持。对于旧版本的IE,polyfill支持可用,这要归功于IE独有的名为“userData”的功能。IE5中引入userData是IE行为,开辟1MB本地存储。通过包装userDataAPI,现代HTML5应用程序可以处理polyfillingLocalStorage一直到IE6(或IE5,技术上)。因此,“享受LocalStorageAPI的简单性,但要注意可能导致一些令人困惑的调试的内部工作原理”。