浏览器三大核心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应用。从今天开始尝试在你的项目中使用它们吧！

相关推荐
老前端的功夫2 小时前
首屏优化深度解析：从加载性能到用户体验的全面优化
前端·javascript·vue.js·架构·前端框架·ux
申阳2 小时前
Day 22：SpringBoot4 + Tauri 2.0（VUE） 登录功能前后端联调
前端·后端·程序员
晴殇i2 小时前
性能飞跃！这几个现代浏览器API让页面加载速度提升至90+
前端·javascript·面试
孟祥_成都2 小时前
nest.js / hono.js 一起学！开发前必备！
前端·node.js
Hilaku2 小时前
检测开发者工具是否打开？这几种方法让黑客无处遁形🤣
前端·javascript·前端框架
qq_316837752 小时前
uniapp 缓存指定接口的响应,在无网络时使用缓存数据
前端·uni-app
GIS开发特训营2 小时前
2025年华中农业大学暑期实训优秀作品（4）：智慧煤仓监控系统平台——重塑煤炭仓储管理新模式
前端·vue.js·信息可视化
腾讯云云开发2 小时前
【CloudBase MCP 升级福利】你的AI开发搭子已进化！晒出AI Coding项目领取周边礼品
前端·后端·小程序·云开发
Web极客码2 小时前
如何在WordPress网站中添加Cookie弹窗
前端·安全·github·wordpress
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04UV安装并设置国内源05React CVE-2025-55182漏洞排查与修复指南06Linux下V2Ray安装配置指南07BongoCat - 跨平台键盘猫动画工具08智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践09从入门到实战：Gemini 3 使用指南速览10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）