浏览器三大核心API：LocalStorage、Fetch API、History API详解

JS_GGbond2025-12-09 11:30

欢迎使用我的小程序👇👇👇👇 [俱好用助手]

引言：为什么这些API如此重要？

想象一下，你正在构建一个现代化的网页应用。你想让用户的数据在关闭浏览器后依然保存，需要从服务器获取最新信息而不刷新页面，还要实现流畅的页面跳转体验。这就是LocalStorage、Fetch API和History API大显身手的时刻！

1. LocalStorage：浏览器的"本地笔记本"

什么是LocalStorage？

LocalStorage就像浏览器内置的一个小型数据库，允许你在用户的设备上存储数据。即使用户关闭浏览器或重启电脑，这些数据仍然存在。

基本用法

javascript 复制代码 
// 存储数据
localStorage.setItem('username', '张三');
localStorage.setItem('theme', 'dark');

// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出：张三

// 删除单个数据
localStorage.removeItem('theme');

// 清空所有数据
localStorage.clear();

// 查看存储了多少数据
const count = localStorage.length;

实际应用场景

javascript 复制代码 
// 保存用户偏好设置
function saveUserPreferences() {
    const preferences = {
        theme: 'dark',
        language: 'zh-CN',
        fontSize: 16
    };
    localStorage.setItem('preferences', JSON.stringify(preferences));
}

// 读取偏好设置
function loadUserPreferences() {
    const saved = localStorage.getItem('preferences');
    if (saved) {
        return JSON.parse(saved);
    }
    return null;
}

// 记住登录状态
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('userToken', 'abc123xyz');

注意事项

  • 只能存储字符串 ：存储对象需用JSON.stringify()，读取用JSON.parse()
  • 存储容量有限：通常为5-10MB，不同浏览器可能有差异
  • 同源策略：只有同一域名下的页面能访问相同的数据
  • 同步操作：大量数据可能影响页面性能

LocalStorage vs SessionStorage

javascript 复制代码 
// LocalStorage - 长期存储（关闭浏览器后还在）
localStorage.setItem('key', '永久保存');

// SessionStorage - 会话存储（标签页关闭就消失）
sessionStorage.setItem('key', '仅本次会话保存');

2. Fetch API：现代网络请求的"邮差"

什么是Fetch API？

Fetch API提供了一个更简单、更强大的替代方案来替代传统的XMLHttpRequest，用于从服务器获取资源。

基本用法

javascript 复制代码 
// 最简单的GET请求
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('错误:', error));

// 使用async/await更优雅
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

完整请求示例

javascript 复制代码 
// POST请求，发送JSON数据
async function postData() {
    const userData = {
        name: '张三',
        email: 'zhangsan@example.com'
    };

    const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer token123'
        },
        body: JSON.stringify(userData)
    });

    if (!response.ok) {
        throw new Error('网络响应不正常');
    }

    return await response.json();
}

// 上传文件
async function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    const response = await fetch('https://api.example.com/upload', {
        method: 'POST',
        body: formData
    });
    
    return response.json();
}

处理响应

javascript 复制代码 
fetch('https://api.example.com/data')
    .then(response => {
        // 检查状态码
        if (!response.ok) {
            throw new Error(`HTTP错误! 状态: ${response.status}`);
        }
        
        // 根据内容类型处理响应
        const contentType = response.headers.get('content-type');
        
        if (contentType.includes('application/json')) {
            return response.json();
        } else if (contentType.includes('text/html')) {
            return response.text();
        } else {
            return response.blob(); // 二进制数据
        }
    })
    .then(data => {
        // 处理数据
        console.log(data);
    })
    .catch(error => {
        // 错误处理
        console.error('请求失败:', error);
    });

3. History API：浏览器的"时光机"

什么是History API？

History API允许你在不重新加载页面的情况下操作浏览器的历史记录，是实现单页应用(SPA)的核心技术。

基本用法

javascript 复制代码 
// 获取当前历史记录状态
console.log(history.length); // 历史记录条数

// 后退一页
history.back();

// 前进一页
history.forward();

// 前进或后退多页
history.go(-2); // 后退两页
history.go(1);  // 前进一页

核心功能：pushState和replaceState

javascript 复制代码 
// 1. pushState - 添加新历史记录，不刷新页面
function navigateToPage(page) {
    const state = { page: page, timestamp: Date.now() };
    const title = `页面: ${page}`;
    const url = `/${page}`;
    
    history.pushState(state, title, url);
    updateContent(page); // 更新页面内容
}

// 2. replaceState - 替换当前历史记录
history.replaceState(
    { page: 'home' },
    '首页',
    '/home'
);

// 3. 监听popstate事件（用户点击前进/后退按钮）
window.addEventListener('popstate', (event) => {
    if (event.state) {
        // 根据state恢复页面状态
        restorePageState(event.state);
    }
});

实际应用：构建简单的SPA路由

javascript 复制代码 
// 定义路由
const routes = {
    '/': 'home.html',
    '/about': 'about.html',
    '/contact': 'contact.html'
};

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 拦截链接点击
    document.body.addEventListener('click', (e) => {
        if (e.target.matches('[data-link]')) {
            e.preventDefault();
            navigateTo(e.target.href);
        }
    });
    
    // 监听浏览器前进后退
    window.addEventListener('popstate', loadContent);
    
    // 加载初始内容
    loadContent();
});

function navigateTo(url) {
    const path = new URL(url).pathname;
    
    // 更新浏览器地址栏，不刷新页面
    history.pushState({ path }, '', url);
    
    // 加载内容
    loadContent(path);
}

async function loadContent(path = location.pathname) {
    const page = routes[path] || '404.html';
    
    try {
        const response = await fetch(`pages/${page}`);
        const content = await response.text();
        
        document.getElementById('content').innerHTML = content;
        document.title = `我的网站 - ${path.substring(1) || '首页'}`;
    } catch (error) {
        document.getElementById('content').innerHTML = '<h2>页面加载失败</h2>';
    }
}

三大API的综合应用示例

让我们创建一个简单的待办事项应用，综合运用这三个API：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>我的待办事项</title>
    <style>
        .completed { text-decoration: line-through; opacity: 0.6; }
    </style>
</head>
<body>
    <h1>待办事项</h1>
    <input type="text" id="todoInput" placeholder="输入新任务">
    <button onclick="addTodo()">添加</button>
    <ul id="todoList"></ul>
    <div>
        <button onclick="filterTodos('all')">全部</button>
        <button onclick="filterTodos('active')">未完成</button>
        <button onclick="filterTodos('completed')">已完成</button>
    </div>

    <script>
        // 从LocalStorage加载数据
        let todos = JSON.parse(localStorage.getItem('todos')) || [];
        let currentFilter = 'all';

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', async () => {
            renderTodos();
            
            // 从服务器获取初始数据（如果本地没有）
            if (todos.length === 0) {
                await fetchInitialTodos();
            }
            
            // 初始化历史状态
            history.replaceState({ filter: 'all' }, '全部任务', '#all');
        });

        // 监听浏览器前进后退
        window.addEventListener('popstate', (event) => {
            if (event.state && event.state.filter) {
                currentFilter = event.state.filter;
                renderTodos();
            }
        });

        async function fetchInitialTodos() {
            try {
                const response = await fetch('https://api.example.com/todos');
                const data = await response.json();
                todos = data;
                saveToLocalStorage();
                renderTodos();
            } catch (error) {
                console.log('使用本地数据');
            }
        }

        function addTodo() {
            const input = document.getElementById('todoInput');
            const text = input.value.trim();
            
            if (text) {
                todos.push({
                    id: Date.now(),
                    text: text,
                    completed: false,
                    createdAt: new Date().toISOString()
                });
                
                input.value = '';
                saveToLocalStorage();
                renderTodos();
            }
        }

        function toggleTodo(id) {
            const todo = todos.find(t => t.id === id);
            if (todo) {
                todo.completed = !todo.completed;
                saveToLocalStorage();
                renderTodos();
            }
        }

        function changeFilter(filter) {
            currentFilter = filter;
            
            // 更新URL和历史记录
            history.pushState(
                { filter: filter },
                `${filter}任务`,
                `#${filter}`
            );
            
            renderTodos();
        }

        function renderTodos() {
            const filteredTodos = todos.filter(todo => {
                if (currentFilter === 'active') return !todo.completed;
                if (currentFilter === 'completed') return todo.completed;
                return true;
            });

            const list = document.getElementById('todoList');
            list.innerHTML = filteredTodos.map(todo => `
                <li onclick="toggleTodo(${todo.id})" 
                    class="${todo.completed ? 'completed' : ''}">
                    ${todo.text}
                    <small>${new Date(todo.createdAt).toLocaleDateString()}</small>
                </li>
            `).join('');
        }

        function saveToLocalStorage() {
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        // 为按钮绑定事件
        window.filterTodos = changeFilter;
        window.addTodo = addTodo;
        window.toggleTodo = toggleTodo;
    </script>
</body>
</html>

总结对比

特性 LocalStorage Fetch API History API
主要用途 本地数据存储 网络请求 历史记录管理
数据持久性 永久存储 临时请求 会话期间
是否需要网络 否 是 否
典型应用 用户偏好、离线数据 获取API数据、提交表单 SPA路由、页面状态
异步操作 同步 异步 同步/异步

最佳实践建议

  1. LocalStorage：

    • 不要存储敏感信息（密码、令牌等）
    • 存储前压缩大数据
    • 定期清理过期数据

  2. Fetch API：

    • 始终添加错误处理
    • 设置请求超时
    • 使用适当的请求头

  3. History API：

    • 确保URL变化与内容同步
    • 提供有意义的state对象
    • 处理浏览器前进/后退按钮

这三个API是现代前端开发的基石，掌握它们将让你能够构建更加流畅、响应迅速的Web应用。从今天开始尝试在你的项目中使用它们吧！

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示