当前位置：首页 > backend >正文

JavaScript【8】异步请求与本地存储

backend 2025/5/23 7:41:09

1.异步请求：

概述：

 指通过前端浏览器往后台服务器发送请求的过程；

请求API的创建:（Ajax 的 XMLHttpRequest）

在IE5,6浏览器版本及以前：

let xhr  = ActiveXObject("Microsoft.XMLHTTP")

目前版本：

let xhr  = new XMLHttpRequest();

实现过程：

1.发送GET请求：参数直接拼接在URL中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
//给提交按钮绑定单击鼠标事件
<button type="submit" onclick="sendGET()">提交GET请求</button><script>//发送get请求function sendGET(){let xrh=new XMLHttpRequest();//配置请求：参数1：请求方式；参数2:请求路径；参数3：是否开启异步（默认为true）xrh.open('get', "http://localhost:8081/garden/sendGet?pageNum=1&pageSize=5&name=zs", true)//发送请求xrh.send();//绑定事件，当请求状态改变时触发console.log("请求已发出，等待服务器响应")xrh.onreadystatechange=function () {/*** readyState  XMLHttpRequest的状态* 0：请求未初始化* 1：服务器链接已建立* 2：请求已收到* 3：正在处理请求* 4：请求已完成 并 响应已准备就绪** status返回请求的状态号* 200：ok* 403* 404* 500.....*/if(xrh.readyState==4&&xrh.status==200){console.log(xrh.responseText)}}}</script>
</body>
</html>

 通过测试结果可以看出，在前端发送请求，并在url中携带参数，在请求到达后台服务器后，经过后台服务器处理后，再将响应结果反馈到前端浏览器；

2.发送POST请求：参数为JSON形式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
//给提交按钮绑定单击鼠标事件
<button type="submit" onclick="sendPOST()">提交GET请求</button><script>//发送post请求：参数为JSON形式function sendPOST() {//创建XMLHttpRequest对象let xhr=new XMLHttpRequest();//配置 请求的方式  请求的路径  是否是异步的xhr.open('POST', "http://localhost:8081/garden/loginIn", true);//配置头信息：配置参数传递方式//发送JSON数据到后台xhr.setRequestHeader("Content-Type","application/json");//发送数据xhr.send(JSON.stringify({userCode: 'admin',userPwd: '123456',userName: 'ls'}));console.log("请求已发出，等待服务器响应")//绑定事件：xhr.onreadystatechange=function () {if(xhr.readyState==4&&xhr.status==200){//将响应数据转成对象形式console.log(JSON.parse(xhr.responseText))}}}</script>
</body>
</html>

   浏览器发送POST请求，并在请求体中携带JSON形式的参数到后台服务器，后台服务器再接收到请求后，对参数进行处理，并将响应结果反馈到前端浏览器；

   需要注意的是,前端发送请求之前，必须要设置请求头信息，将发送参数的类型设置为JSON形式，否则后端无法接收；

3.发送POST请求：参数为表单形式（键值对）：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
//给提交按钮绑定单击鼠标事件
<button type="submit" onclick="sendPOST()">提交GET请求</button><script>//发送POST请求：参数为表单类型function sendPOST() {//创建XMLHttpRequest对象let xhr=new XMLHttpRequest();//配置 请求的方式  请求的路径  是否是异步的xhr.open('POST', "http://localhost:8081/garden/sendPost", true);//配置头信息：配置参数传递方式// 发送表单数据到后台xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//发送数据xhr.send('pageNum=1&pageSize=5&name=ls');console.log("请求已发出，等待服务器响应")//绑定事件：xhr.onreadystatechange=function () {if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText)}}}
</script>
</body>
</html>

浏览器发送POST请求，并在请求体中携带表单形式的参数到后台服务器，后台服务器再接收到请求后，对参数进行处理，并将响应结果反馈到前端浏览器；
需要注意的是,前端发送请求之前，必须要设置请求头信息，将发送参数的类型设置为表单形式，否则后端无法接收；

2.本地存储：

1.概述：

我们之前了解过，在浏览器端可以通过Cookie来存储用户信息，但是对于Cookie来说，它存在着下面一些弊端：

     1.数据的大小： 大小限制在4kb左右；

     2.安全问题 ：在HTTP请求中Cookie是明文现实的（https不是的）；

     3.网络负担大： cookie会被附加在每一个HTTP请求中；

因此在HTML5中引入了新的API（WebStorage）来解决Cookie的存储问题；

2.WebStorage：

1.概述：

  WebStorage 是 HTML5 提供的一种在浏览器端存储数据的机制，用于在客户端（浏览器）存储键值对形式的数据。它提供了比传统的 Cookie 更强大、更灵活的存储功能，主要包括两种存储类型：localStorage 和 sessionStorage。

2.localStorage 和 sessionStorage：

localStorage：

localStorage 中的数据是持久存储的，除非进行手动清除，否则数据会一直存在；因此被用来存储一些需要长期保存的信息，如用户的登录凭证（在设置了适当的安全措施的情况下）、用户的偏好设置（如主题颜色、字体大小等）、应用的配置信息等；

sessionStorage：

sessionStorage中数据的有效期和浏览器会话相同。当用户关闭浏览器窗口或者标签页时，sessionStorage 中存储的数据就会被清除。这使得它适合存储在一个会话期间（即从打开浏览器窗口或标签页开始，到关闭它为止）需要临时保存的数据，如表单数据在页面跳转过程中的临时存储、购物车信息在单次购物会话中的存储等；

3.相关应用：

1.存储/获取数据：setItem（）/getItem()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//存储数据localStorage.setItem("key","value-data")//获取数据let str=localStorage.getItem('key');console.log(str)
</script>
</body>
</html>

            ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732009317675-d9252d58-00c1-4e82-a6a2-2f57fc8d811a.png)

2.删除数据：removeItem（）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//存储数据localStorage.setItem("key","value-data")//删除数据localStorage.removeItem('key')console.log(localStorage.getItem('key'))
</script>
</body>
</html>

                   ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732009466554-6d1ba434-7b91-4a4d-87a6-b520fab2eafb.png)

3.清空数据：clear()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//存储数据localStorage.setItem("key","value-data")//清空数据localStorage.clear()console.log(localStorage.getItem('key'))
</script>
</body>
</html>

                       ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732009466554-6d1ba434-7b91-4a4d-87a6-b520fab2eafb.png)

4.遍历数据：

方式1：for循环：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//存储数据localStorage.setItem("key","value-data")localStorage.setItem("key1","value-data")localStorage.setItem("key2","value-data")localStorage.setItem("key3","value-data")for (let i = 0; i < localStorage.length; i++) {//通过下标获取keylet key=localStorage.key(i);//输出所有的key及valueconsole.log(key,localStorage.getItem(key));}
</script>
</body>
</html>

               ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732010016623-9b05651c-df77-4f08-bfde-6c9ef3b0f73f.png)

方式2：for-in循环：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//存储数据localStorage.setItem("key1","value-data")localStorage.setItem("key2","value-data")localStorage.setItem("key3","value-data")for (let key in localStorage) {console.log(key,localStorage.getItem(key));}
</script>
</body>
</html>

注意：使用for -in循环遍历时，除了可获取到添加的数据，还会遍历出其他的一些键值对，如下所示：