6.本地存储与API请求的实现-数据存储与网络请求

6.本地存储与API请求的实现-数据存储与网络请求

在现代Web应用开发中，本地存储与API请求是两个不可或缺的技术点。本文将详细介绍如何在项目中实现数据存储与网络请求，帮助开发者更好地理解和应用这些技术。

一、本地存储的实现

本地存储主要分为两种：localStorage和sessionStorage。它们都提供了简单的键值对存储方式。

1. localStorage

localStorage用于长期存储数据，数据在浏览器关闭后依然存在。

```javascript // 设置localStorage localStorage.setItem('key', 'value'); // 获取localStorage let value = localStorage.getItem('key'); // 删除localStorage localStorage.removeItem('key'); // 清空所有localStorage localStorage.clear(); ```

2. sessionStorage

sessionStorage用于临时存储数据，数据在浏览器关闭后会被清除。

```javascript // 设置sessionStorage sessionStorage.setItem('key', 'value'); // 获取sessionStorage let value = sessionStorage.getItem('key'); // 删除sessionStorage sessionStorage.removeItem('key'); // 清空所有sessionStorage sessionStorage.clear(); ```

二、API请求的实现

API请求通常使用XMLHttpRequest或Fetch API来实现。这里我们主要介绍更现代的Fetch API。

1. 基本用法

Fetch API提供了一个全局的fetch方法，用于发起网络请求。

```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ```

2. 配置请求

可以通过传递一个配置对象来设置请求的方法、头部、 body等。

```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: 'John', age: 30}) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ```

3. 错误处理

Fetch API的 promise 会在网络故障或请求被阻止时拒绝，但不会拒绝HTTP错误状态。

```javascript fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ```

三、结合本地存储与API请求

在实际应用中，我们常常需要将本地存储与API请求结合起来使用。例如，先将数据从API请求获取并存储到本地，然后在需要时从本地读取。

```javascript // 获取数据并存储到localStorage fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { localStorage.setItem('data', JSON.stringify(data)); }) .catch(error => console.error('Error:', error)); // 从localStorage读取数据 let storedData = localStorage.getItem('data'); if (storedData) { let parsedData = JSON.parse(storedData); console.log(parsedData); } ```

通过本文的介绍，相信你已经掌握了本地存储与API请求的基本实现方法。在实际开发中，灵活运用这些技术可以有效提升应用的性能和用户体验。