fetch

在JavaScript中，fetch() 是一个内置的函数，用于发起网络请求。它是一个返回Promise的异步操作，可以用来获取资源（例如，从网络上获取数据）。fetch API 提供了一个更现代、更强大、更灵活的方法来进行网络操作，相比于旧的 XMLHttpRequest。

一个基本的 fetch 请求通常如下所示：

javascriptCopy code
fetch('https://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('There has been a problem with your fetch operation:', error);
  });

在这个例子中：

fetch('https://example.com/data') 发起一个网络请求到提供的URL。
.then(response => {...}) 当响应到达时执行，这里检查响应是否成功。
.then(data => {...}) 处理响应体的内容（在这个例子中是JSON）。
.catch(error => {...}) 捕获过程中的任何错误。

fetch API 还支持发送请求时配置各种选项，如方法（GET、POST等）、头信息、请求体等。例如，发送一个 POST 请求：

javascriptCopy code
fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个示例中，除了URL之外，还提供了一个配置对象来指定请求的方法、头部和正文内容。

cookie

在JavaScript中，cookies是一种存储在用户浏览器上的小型数据片段，通常用于识别用户会话、保存用户偏好设置或其他类型的本地数据。

如何使用Cookies:

设置Cookie: 使用 document.cookie 可以创建或更新一个cookie。例如：
```
javascriptCopy code
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
```
这里，我们创建了一个名为 "username" 的cookie，值为 "John Doe"，并设置了过期时间和路径。
读取Cookie: 同样使用 document.cookie 读取所有cookie。它返回一个字符串，其中包含所有的cookie，每个cookie之间用分号和空格分隔。
```
javascriptCopy code
var allCookies = document.cookie;
```

删除Cookie: 通过将cookie的过期日期设置为过去的某个时间来删除它。

javascriptCopy code
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

注意事项:

安全性: 由于cookies可以通过客户端脚本进行访问，因此可能会暴露于跨站点脚本（XSS）攻击。使用 HttpOnly 标志可以提高安全性，因为它阻止了JavaScript访问带有此标志的cookies。
域和路径: Cookie的作用域可以通过域（domain）和路径（path）进行限制。这定义了哪些请求会将cookie发送到服务器。
大小限制: 浏览器通常对cookies的大小和每个域下的cookie数量有限制。通常，每个cookie的大小限制为4KB。
同源策略: 默认情况下，出于安全考虑，一个域的JavaScript无法读取另一个域的cookies。
会话与持久Cookie: 如果不设置过期时间，cookie在浏览器关闭时就会被删除（会话cookie）。设置了过期时间的cookie被称为持久cookie。

jsonp

在JavaScript中，JSONP（JSON with Padding）是一种旧式的跨域数据获取技术。由于 <script> 标签可以从不同源加载资源的特性，JSONP 通过动态创建 <script> 标签并指定一个回调函数来接收数据，从而绕过浏览器的同源策略。

如何使用 JSONP:

定义回调函数: 在客户端定义一个用来接收数据的回调函数。

javascriptCopy code
function myCallback(data) {
  console.log('Data received:', data);
}

发起 JSONP 请求: 动态创建一个 <script> 标签，其 src 属性设置为目标URL，并将回调函数的名称作为一个查询参数附加在 URL 上。

javascriptCopy code
const script = document.createElement('script');
script.src = `http://example.com/jsonp?callback=myCallback`;
document.head.appendChild(script);

服务器端响应: 服务器端识别到回调参数后，返回一段JavaScript代码，这段代码实际上是回调函数的调用，其参数为需要传递的数据。
```
javascriptCopy code
// 假设callback参数的值为"myCallback"
myCallback({"key": "value"});
```
执行回调函数: 当 <script> 标签加载完毕后，返回的 JavaScript 代码被执行，回调函数随即被调用，并处理传入的数据。