热门关键字:
jquery > jquery教程 > jquery教程 > html前端三列布局

html前端三列布局

382
作者:管理员
发布时间:2021/4/29 17:41:28
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4627
  原理: 利用float浮动和定位、负边框,实现两边固定,中间自适应的三栏布局


  具体实现(采用html5和css3的语义化实现)该布局存优缺点


  优点:可以左右拉伸,内容区域为自动缩放,符合早期的传统三列布局


  缺点:当缩放当一定程度,会发现整个页面结构将会紊乱。这个问题用现在可以用到css3的mi-width可以解决。


  今天我们来讲一讲 Web 存储有几种机制,并弄清楚什么是临时存储,什么是持久存储。


  你可能不知道的是:我们平常口中所说的持久存储 localStorage 很多时候其实是系统级别的“临时存储”。


  Indexed DB 的操作是异步的,不会阻塞主线程的执行,可以在 window、web workers、service workers 环境中使用。


  IndexedDB 是基于文件存储的,API 较为复杂,包含 v1 v2 的差异,建议通过类库来使用,比如:Dexie.js。


  Cache Storage API 为缓存的 Request/Response 对象提供存储机制,常在 ServiceWorker 中应用。


  异步,不会阻塞主线程的执行,可以在 window、web workers、service workers 环境中使用。


  同步,会阻塞主线程的执行。


  一般用于储存临时性的少量的数据。


  SessionStorage 是标签级别的,跟随者标签的生命周期,并且会随着标签的销毁而清空数据。


  无法在 web workers、service workers 环境中使用。


  它只能储存字符串,大小限制大约为 5MB。


  同步,会阻塞主线程的执行。


  无法在 web workers、service workers 环境中使用。


  它只能储存字符串,大小限制大约为 5MB。


  Cookies 有它的用途,但不适用于储存数据。


  Cookie 会在每次 HTTP 请求的时候携带在请求头中,大体积的 Cookies 会显著增加 HTTP 请求的负担。


  Cookies 读写是同步的,只能储存字符串,并且无法在 web workers 环境中使用。


  File System API 和 FileWriter API 提供读取或写入文件到沙箱中(Sandboxed file system)。


  它是异步的,不推荐使用,因为 File System API 只能在 Chromium 内核中使用。


  File System Access API 设计用于便捷得读取和编辑本地文件。


  但在读取或写入本地文件的时候,需要获得用户授权,并且授权状态无法持久化记录。


  Application Cache 已被弃用,不建议使用。


  建议迁移至 service workers 或 Cache API。


  Chrome 允许使用 80% 的硬盘空间,单一的源(域名)可以使用 60% 的硬盘空间,可以通过 StorageManager API 检测最大的硬盘空间限额,其他基于 Chromium 内核的浏览器有不一样的限制,可能会允许使用更多的硬盘空间,查看更多实现 PR #3896Internet Explorer 10(IE 10)及以上,最多可以储存 250MB,并在超过 10MB 的时候会提示用户Firefox 允许使用 50% 的空闲硬盘空间,单个一级域名最多可以使用 2GB 硬盘空间,可以通过 StorageManager API 检测最大的硬盘空间限额Safari 允许使用 1GB,当达到 1GB 的时候会提示用户(该数据可能不准确,没有找到 Safari 官方文档)


  现代浏览器大多数已经不会再提示用户以授权更多的储存空间了。


  在大多数浏览器中,可以通过 StorageManager API 检测储存空间总量与正在使用的量


  注意:


  并不是所有浏览器都实现了,因此使用之前需要先判断兼容性需要捕获并处理超过配额限额的错误


  indexedDB 超限将会执行 onabort 回调,并抛出一个 DOMException 错误,需要处理它的 QuotaExceededError 异常。


  抛出一个 Promise Rejection,QuotaExceededError 错误对象,需要处理它的 QuotaExceededError 异常。


  Web Storage 分为两种储存模式,分别是:临时存储 Best Effort 和持久存储 Persistent。


  默认情况下网站数据(包括 IndexedDB, Cache API, LocalStorage 等)都储存在临时存储 Best Effort 中,会在存储空间不足的时候被浏览器清除掉。


  各个浏览器回收存储空间的差异:


  Chrome 当浏览器存储空间不足时,会优先清除最近最少使用的数据,逐个清除,直至不再超限IE 10+ 不会自动清除数据,但会阻止站点继续写入数据Firefox 当磁盘空间充满时,会优先清除最近最少使用的数据,逐个清除,直至不再超限Safari(iOS、iPadOS、MacOS) 会自动清除超过 7 天以上的数据,但不会清除“已添加至主屏幕”的网站和“PWA”网站


  申请持久存储 Persistent Storage:


  查看持久存储 Persistent Storage 授权状态:


  各个浏览器申请持久存储 Persistent Storage 的差异:


  在 Chrome 55 以后,申请持久存储只需要满足以下任一条件,即可自动获得持久存储权限,无需用户确认:


  该站点已添加书签, 并且用户的书签数小于等于5个站点有很高的"site engagement",通过这个命令可以查看: 站点已添加到主屏幕站点启用了push通知功能在 Firefox 中,会提示用户授权




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐