新增标签元素
- 语义化结构标签：
<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>, <time>, <mark> - 多媒体标签：
<audio>, <video>, <source>, <track>, <canvas>, <svg> - 表单增强元素：
<datalist>, <output>, <meter>, <progress>新增 Input 类型：
date,datetime,email,number,range,tel,color,time,url,search - 其它标签：
<details>, <summary>, <dialog>, <template>
本地存储
生命周期：
cookie可设置过期时间localStorage永久存储sessionStorage关闭标签页自动清除
存储大小：
cookie4KBsessionStorage5MB – 10MBlocalStorage5MB – 10MB
作用域：
cookie：可设置 Domain 和 Path，控制哪些域名和路径可以访问localStorage：同源策略下的所有窗口和标签页共享sessionStorage：仅当前标签页有效，即使同源的其他标签页也无法访问
以下是整理成 Markdown 表格的浏览器存储特性对比：
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 生命周期 | 可设置过期时间（Expires/Max-Age） |
永久存储，除非手动清除 | 关闭标签页后自动清除 |
| 存储大小 | 约 4KB | 5MB – 10MB（不同浏览器可能有差异） | 5MB – 10MB（同 localStorage） |
| 作用域 | 通过 Domain 和 Path 控制访问范围 |
同源策略下的所有窗口/标签页共享 | 仅当前标签页有效，同源其他标签页不可访问 |
| 数据发送 | 每次请求自动携带在 HTTP 头部 | 不自动发送，仅客户端存储 | 不自动发送，仅客户端存储 |
| API 易用性 | 需手动解析字符串 | 直接使用 setItem/getItem 等操作 |
同 localStorage |
补充说明
- 同源策略：协议、域名、端口必须完全相同。
- 安全建议：
- Cookie 敏感数据建议设置
HttpOnly和Secure。 - 大容量数据优先使用
localStorage或sessionStorage。 sessionStorage适合临时数据（如表单填写中途防止丢失）。
- Cookie 敏感数据建议设置
<script> 加载方式
- 默认同步阻塞 HTML 解析
- defer 延迟执行直至DOM解析完后
- async 异步引入，下载完成后立即执行
发表回复