新增标签元素
| 标签类别 | 具体标签 |
|---|---|
| 语义化结构标签 | header、footer、nav、main、article、section、aside、figure、figcaption、time、mark |
| 多媒体标签 | audio、video、source、track、canvas、svg |
| 表单增强元素 | datalist、output、meter、progress |
| 新增 Input 类型 | input(date)、input(datetime)、input(email)、input(number)、input(range)、input(tel)、input(color)、input(time)、input(url)、input(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 解析 -->
<script src="script.js"></script>
<!-- defer 加载：延迟执行，直至 DOM 解析完成后 -->
<script defer src="script.js"></script>
<!-- async 加载：异步引入，下载完成后立即执行 -->
<script async src="script.js"></script>加载说明：
- 默认：
<script>同步加载，阻塞 HTML 解析和渲染 - defer：
<script>延迟执行，DOM 解析完成后按顺序执行 - async：
<script>异步加载，下载完成后立即执行（执行顺序不固定）
发表回复