草庐IT

记录--关于 HTML5 LocalStorage 的 5 个不为人知的事实

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

LocalStorage 是HTML5中一个方便使用的 API,它为 Web 开发人员 提供了一个易于使用的5MB的存储空间。使用 LocalStorage API 真的再简单不过了。不信看下:

//Save a value to localStorage
localStorage.setItem('key', 'value to save');
//OR
localStorage.key = 'string value to save';

//Get the value back out of localStorage
localStorage.getItem('key');
//OR
localStorage.key;

//Clear all localStorage values
localStorage.clear();

localStorage API 非常简单,但是很容易忽略有关它们的一些重要细节。关于这个简单的 API,您可能不知道(或可能已经忘记)以下五件事:

1. Secure (SSL) 页面上的 LocalStorge 值是隔离的

根据草案规范,浏览器根据 协议 + 主机名 + 唯一端口(也称为HTML5 Origin)隔离 LocalStorage 值。主机名实现隔离是我们所预期的,因为我们不希望恶意网站访问我们网站的 LocalStorage 数据。但是协议为什么也隔离(即http和https)?

这种隔离的结果意味着保存到http://htmlui.com上的 LocalStorage 的值不能被从https://htmlui.com的页面访问(反之亦然)。

因此如果您的网站同时提供 HTTP 和 HTTPS 页面,请务必小心。(注意:Firefox 提供了一个专有的GlobalStorage,它没有这种 HTTP/HTTPS 隔离。)

2. SessionStorage 值在某些浏览器重启后仍然存在

SessionStorage 与 LocalStorage 不同,它不是为在用户浏览器中长期保存值而设计的。相反,SessionStorage 中的值会在浏览器会话结束时被销毁,这通常是在浏览器窗口关闭时。

不过有一个例外。

当浏览器提供“恢复会话”功能时,通常旨在帮助用户从浏览器/计算机崩溃中快速恢复,SessionStorage 中的值也将被恢复。因此,虽然它是服务器上的一个新“会话”,但从浏览器的角度来看,它是浏览器重启后单个会话的延续。

这使得 SessionStorage 成为一种理想的存储技术,用于临时“备份”用户表单值、在输入时将输入保存到 SessionStorage 以及在页面加载时恢复(如果存在),以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复(尽管浏览器会自行执行其中的一些操作,尤其是在从崩溃中恢复时)。

3.以“隐身”模式创建的LocalStorage值是隔离的

当您在私人/隐身/安全模式(有时更粗略和准确地称为“se情模式”)下启动浏览器时,它将为 LocalStorage 值创建一个新的临时数据库。这意味着当隐私浏览会话关闭时,保存到 LocalStorage 的任何内容都将被销毁,从而使 LocalStorage 的行为更像 SessionStorage。

此外,由于浏览器的“会话恢复”功能不会重新打开私有模式会话,因此在浏览器窗口关闭后,在 SessionStorage 中创建的任何内容也将丢失。实际上,简而言之,在隐私浏览会话期间放入 Local 或 SessionStorage 的任何数据都会在浏览器窗口关闭(有意或无意)后立即丢失。

4. LocalStorage 配额不能大于 5MB

LocalStorage 不应该是 HTML5 的浏览器内存储的主要形式(IndexDB 才是),但某些应用程序可能需要LocalStorage提供不止5m的内存。有没有办法扩大 LocalStorage 配额?没有,没有的,别想了,你在想peach

但是也有个旁门左道!

从技术上讲,LocalStorage 不会阻止同一主机(使用相同的协议和端口)的子域访问他的 LocalStorage 对象。因此,一些浏览器公开了一种解决方法,即授予“a1.website.com”和“a2.website.com”它们自己的 5MB LocalStorage 配额。并且由于两个站点位于同一来源,因此它们可以访问彼此的值。(安全方面注意:这也意味着共享域上的站点,例如 apphost.com,都共享一个 HTML5 存储对象。请谨慎操作!)

因此,虽然存在技术解决方法,但HTML5 Web 存储规范中特别不赞成它。。

但到目前为止只有 Opera 实现了规范的这一部分。所以现在,5MB 是你的现实限制。

5. LocalStorage 可以填充到旧浏览器(包括 IE)中

啊,旧版浏览器(特指 乐色IE浏览器),是每个 HTML5 派对上的失败者。幸运的是,高级浏览器对 LocalStorage 的支持非常好。它在 IE8+ (!)、Firefox 3.5+ 和 Chrome 4+ 中原生可用。很少有 HTML5 规范能像 Web 存储那样得到广泛且一致的支持。

对于旧版本的 IE,polyfill 支持是可用的,这要归功于一个名为“userData”的 IE-only 功能。在 IE5 中引入 userData 是一种 IE 行为,它会打开 1MB 的本地存储。通过包装 userData API,现代 HTML5 应用程序可以处理 polyfill LocalStorage 一直到 IE6(或 IE5,技术上)。

因此,请享受简单的 LocalStorage API,但要注意可能会造成一些令人困惑的调试的内部工作原理

本文转载于:

https://juejin.cn/user/1204720476893064

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

有关记录--关于 HTML5 LocalStorage 的 5 个不为人知的事实的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  4. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手;我正在运行一些rspec测试,但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音?我仔细检查了环境是否设置为:test,这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  5. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型,即Invoice和Invoice_details。一个Invoice_details属于Invoice,一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格? - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示,但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题,而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  10. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目,它使用ActiveRecordgem进行数据库交互,我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录,因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

随机推荐