以下是使用原生JavaScript和Ajax以及使用Fetch的示例代码，实现登录并将Token保存到localStorage中。
使用原生JavaScript和Ajax的示例：
// 登录函数
function login(username, password) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/login", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
localStorage.setItem('token', response.token);
// 登录成功后的操作
} else if (xhr.status !== 200) {
// 处理错误
}
};
xhr.send(JSON.stringify({ username: username, password: password }));
}使用Fetch的示例：
// 登录函数
function login(username, password) {
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: username, password: password })
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => {
localStorage.setItem('token', data.token);
// 登录成功后的操作
})
.catch(error => {
console.error('登录失败:', error);
});
}在这两个示例中，我们都发送了一个POST请求到/api/login，并在收到服务器的响应后，将返回的token保存到localStorage中。如果使用Ajax，我们需要处理xhr.readyState和xhr.status，而使用Fetch时，我们可以利用response.ok来简化错误处理，并使用Promise链进行异步操作。