本地存储和会话存储 | 网络存储 API

简介

本地存储和会话存储以及网络存储 API 是 Web 开发中常用的三种存储方式。这些 API 提供了一种在客户端存储和获取数据的方法，使得 Web 应用程序能够更高效地工作。

其中，本地存储和会话存储都属于 Web 存储 API，它们允许开发人员在浏览器中存储键值对数据，这些数据可以被后续的访问和操作所使用。本地存储和会话存储之间的区别在于存储的数据的生命周期不一样：本地存储的数据在本地存储中保留，直到被显式地移除或者用户清除浏览器缓存；而会话存储的数据只在浏览器窗口或选项卡打开期间存在，一旦关闭窗口或选项卡，这些数据将被自动删除。

网络存储 API 是另一种 Web 存储 API，这个 API 允许浏览器向服务器发送异步 HTTP 请求（常见的是 AJAX）。使用这个 API，开发人员可以在不需要刷新页面的情况下向服务器发送动态请求。

本地存储和会话存储

LocalStorage

LocalStorage 是 Web 存储 API 中的一种，它允许开发人员在浏览器中以键值对的方式存储数据。这些数据可以被后续的访问和操作所使用。LocalStorage 中的数据可以在浏览器关闭后被保留，直到被显式地移除或者用户清除浏览器缓存。

LocalStorage 的 API 提供了以下方法：

• setItem(key, value)：将键值对数据存储到本地存储中。如果 key 已经存在，则更新 value。
• getItem(key)：从本地存储中获取 key 对应的值。
• removeItem(key)：从本地存储中删除 key 对应的值。
• clear()：从本地存储中删除所有键值对数据。
• length 属性：返回本地存储中存储的键值对数量。

以下是一个使用 LocalStorage 的例子：

// 存储数据
localStorage.setItem('name', '张三');
// 获取数据
const name = localStorage.getItem('name');
console.log(name); // 输出：'张三'
// 删除数据
localStorage.removeItem('name');

SessionStorage

SessionStorage 与 LocalStorage 的 API 几乎完全相同，它们都允许开发人员在浏览器中以键值对的方式存储数据。SessionStorage 中存储的数据只在浏览器窗口或选项卡打开期间存在，一旦关闭窗口或选项卡，这些数据将被自动删除。

SessionStorage 与 LocalStorage 的 API 相同，但是需要通过 window.sessionStorage 访问对象。下面是一个使用 SessionStorage 的例子：

// 存储数据
sessionStorage.setItem('name', '李四');
// 获取数据
const name = sessionStorage.getItem('name');
console.log(name); // 输出：'李四'
// 删除数据
sessionStorage.removeItem('name');

网络存储 API

XMLHttpRequest

XMLHttpRequest 是一种为 Web 开发而设计的 API，它是一个异步 HTTP 客户端，用于发送 HTTP 请求和接收 HTTP 响应。XMLHttpRequest 支持所有 HTTP 方法，比如 GET、POST、PUT 和 DELETE，并且具有异步和同步请求的功能。

以下是一个使用 XMLHttpRequest 发送异步 GET 请求的例子：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.log('请求错误:' + xhr.status);
  }
};
xhr.send();

在这个例子中，我们发送了异步 GET 请求到指定的 URL（https://jsonplaceholder.typicode.com/todos/1），然后等待服务器响应。在响应到达后，我们能够成功地获取响应的内容。

Fetch API

Fetch API 是一种新的 API，用于在 JavaScript 中进行 HTTP 请求，它是在 XMLHttpRequest 基础上发展而来的。Fetch API 提供了一个基于 Promise 的接口，使 JSON 和原始数据等 HTTP 响应能够简单地得到处理。

以下是一个使用 Fetch API 发送异步 GET 请求的例子：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个例子中，我们使用了 JavaScript 的新 API（Fetch API）来发送请求。使用 fetch() 方法可以发送 URL 的请求，然后将得到的响应转换为 JSON 数据，并在控制台中打印出返回的数据。

总结

本地存储和会话存储，以及网络存储 API 提供了 Web 开发中常用的三种存储方式。使用这些 API，开发人员可以在客户端存储和获取数据，使得 Web 应用程序能够更高效地工作。LocalStorage 和 SessionStorage 允许开发人员在浏览器中存储键值对数据，而 XMLHttpRequest 和 Fetch API 允许浏览器向服务器发送异步 HTTP 请求，使得 Web 应用程序可以动态更新和请求数据。