【技术专题】HTML5 网页技术 - Web Storage 本地存储 & 文件 API & 拖放 API

大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5 Web Storage 本地存储

HTML5 Web Storage 是浏览器提供的本地键值对存储方案，主要有两种：

类型	生命周期	作用域
localStorage	持久保存，除非用户手动清除	同源下所有页面共享
sessionStorage	当前会话有效，关闭标签页/窗口后清除	仅当前标签页/窗口共享

常用 API：

localStorage.setItem('name', '张三');   // 存
localStorage.getItem('name');           // 取
localStorage.removeItem('name');        // 删一个
localStorage.clear();                   // 清空

// sessionStorage 用法完全一样
sessionStorage.setItem('token', 'abc');

特点：

• 只能存字符串，存对象要配合 JSON.stringify / JSON.parse
• 受同源策略限制：协议、域名、端口都相同才能访问
• 容量通常约 5--10MB，比 Cookie 大很多
• 数据不会自动随 HTTP 请求发送，性能比 Cookie 好
• 是同步 API，大量读写可能阻塞主线程

和 Cookie 的区别：

• Cookie 每次请求都会自动携带，容量约 4KB
• Web Storage 不随请求发送，容量更大
• Cookie 可设置过期时间，localStorage 默认永久，sessionStorage 会话结束清除

常见用途：

用户偏好、主题设置、表单草稿、临时登录状态等。

HTML5 文件 API

HTML5 File API 让网页在用户主动选择或拖放文件后，能够读取、预览、分片和上传本地文件。

核心对象

• File ：代表一个文件，继承自 Blob。常用属性：
  • name：文件名
  • size：字节大小
  • type：MIME 类型，如 image/png
  • lastModified：最后修改时间
• FileList ：<input type="file"> 选中的文件列表，类似数组。
• Blob ：二进制大对象，可表示文件内容，支持 slice() 分片。
• FileReader ：异步读取文件内容，常用方法：
  • readAsText(file)：读为文本
  • readAsDataURL(file)：读为 Base64 Data URL，常用于图片预览
  • readAsArrayBuffer(file)：读为 ArrayBuffer
• URL.createObjectURL()：为 Blob/File 创建临时 URL，用于预览或下载。
• FormData ：配合 fetch 或 XMLHttpRequest 上传文件。

简单示例：选择图片并预览

<input type="file" id="fileInput" accept="image/*">
<img id="preview" width="200">

<script>
  const input = document.getElementById('fileInput');
  const preview = document.getElementById('preview');

  input.addEventListener('change', () => {
    const file = input.files[0];
    if (!file) return;

    console.log(file.name, file.size, file.type);

    const reader = new FileReader();
    reader.onload = e => {
      preview.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
</script>

常见用途

// 上传
const fd = new FormData();
fd.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: fd
});

// 分片
const chunk = file.slice(0, 1024 * 1024); // 前 1MB

// 创建临时 URL
const url = URL.createObjectURL(file);
// 用完后释放
URL.revokeObjectURL(url);

HTML5 拖放 API

HTML5 拖放 API 是浏览器原生提供的一套基于 DOM 事件的拖拽机制，可以让用户把元素从一个位置拖到另一个位置，常用于排序、看板、上传文件等场景。

核心用法

1. 让元素可拖拽：

<div id="source" draggable="true">拖我</div>
<div id="target">放到这里</div>

1. 监听拖拽事件：

• 拖拽源：dragstart、drag、dragend
• 放置目标：dragenter、dragover、dragleave、drop

其中最关键的一点：

目标元素的 dragover 必须调用 e.preventDefault()，否则不会触发 drop。

最小示例

<div id="source" draggable="true">拖我</div>
<div id="target" style="width:200px;height:100px;border:1px solid #ccc;">
  放到这里
</div>

<script>
  const source = document.getElementById('source');
  const target = document.getElementById('target');

  source.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', source.id);
    e.dataTransfer.effectAllowed = 'move';
  });

  target.addEventListener('dragover', e => {
    e.preventDefault(); // 允许放置
    e.dataTransfer.dropEffect = 'move';
  });

  target.addEventListener('drop', e => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    target.appendChild(document.getElementById(id));
  });
</script>

常用对象：dataTransfer

• setData(type, data)：在 dragstart 中写入数据。
• getData(type)：在 drop 中读取数据。
• effectAllowed / dropEffect：控制拖拽效果，如 move、copy。
• files：拖入文件时可通过 e.dataTransfer.files 获取文件列表。
• setDragImage()：自定义拖拽时跟随鼠标的图像。