JS联系方式|极客笔记

JS联系方式

1. 引言

在Web开发中，我们常常需要与用户进行联系，比如发送电子邮件、发送短信、拨打电话等。为了能方便地进行联系，我们需要获取和存储用户的联系方式。本文将介绍如何使用JavaScript获取、存储和获取用户的联系方式。

2. 获取用户联系方式

要获取用户的联系方式，首先需要与用户进行交互，提示用户输入相应的信息。

2.1 提示用户输入联系方式

在网页中，可以使用HTML <input> 元素来创建一个输入框，用于获取用户输入的联系方式。例如，我们创建一个用于输入电子邮件地址的输入框：

<label for="email">电子邮件地址：</label>
<input type="email" id="email" name="email">

这段代码中，使用了 <label> 元素来创建一个与输入框关联的标签，提高可访问性。输入框的类型为 email，这样在移动设备上会显示适用于输入电子邮件地址的键盘。

可以根据实际需求，创建不同类型的输入框来获取用户的联系方式。除了输入框，也可以使用下拉菜单、多选框等元素来获取用户选择的联系方式。

2.2 验证用户输入的联系方式

为了保证用户输入的联系方式是有效的，我们需要进行验证。在上面的示例中，虽然使用了 type="email"，但这只是在移动设备上限制了输入键盘的类型，并不能保证用户输入的是有效的电子邮件地址。

为了验证用户输入的联系方式，可以使用正则表达式来进行匹配。例如，下面的函数用于验证电子邮件地址的格式是否正确：

function validateEmail(email) {
  const pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
  return pattern.test(email);
}

const userEmail = document.getElementById('email').value;
if (validateEmail(userEmail)) {
  // 用户输入的电子邮件地址格式正确
} else {
  // 用户输入的电子邮件地址格式不正确
}

上面的代码中，定义了一个正则表达式的模式来匹配电子邮件地址，然后使用 test() 方法来检查用户输入的电子邮件地址是否符合这个模式。

除了验证电子邮件地址，还可以使用正则表达式来验证其他类型的联系方式，比如手机号码、身份证号码等。

3. 存储用户联系方式

获取用户的联系方式之后，我们需要将其存储起来，以便后续使用。

3.1 本地存储

在浏览器中，可以使用浏览器提供的本地存储机制来存储用户的联系方式。常用的本地存储机制有以下两种：

localStorage： 用于存储数据，数据在浏览器关闭后仍然可用。
sessionStorage： 用于存储会话数据，数据在浏览器关闭后会被删除。

可以使用 setItem() 方法将用户的联系方式保存到本地存储中，使用 getItem() 方法从本地存储中获取联系方式。例如，下面的代码演示了如何使用 localStorage 来存储用户的电子邮件地址：

const userEmail = document.getElementById('email').value;
localStorage.setItem('email', userEmail);

const storedEmail = localStorage.getItem('email');
console.log(storedEmail); // 输出存储的电子邮件地址

3.2 服务器存储

除了本地存储，还可以将用户的联系方式发送到服务器进行存储。一般来说，需要使用后端编程语言（如Node.js、PHP等）来处理接收和存储联系方式的逻辑。

下面以Node.js为例，介绍如何使用Express框架接收和存储用户的联系方式。首先，在服务器端创建一个接收POST请求的路由：

// app.js
const express = require('express');
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/contact', (req, res) => {
  const userEmail = req.body.email; // 获取用户的电子邮件地址
  // 将用户的电子邮件地址存储到数据库或其他存储介质中
  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

上面的代码中，使用Express的 post() 方法创建一个接收POST请求的路由，该路由对应的URL为 /contact。通过 req.body.email 来获取用户的电子邮件地址。

然后，在前端代码中，使用AJAX或fetch来发送POST请求到服务器：

const userEmail = document.getElementById('email').value;
fetch('/contact', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ email: userEmail })
})
.then(response => {
  // 成功发送请求
})
.catch(error => {
  // 请求发送失败
});

上面的代码中，使用fetch函数向URL /contact 发送了一个POST请求，并将用户的电子邮件地址作为JSON数据发送到服务器端。

4. 获取存储的联系方式

当需要使用存储的联系方式时，我们可以从本地或服务器获取。

4.1 从本地获取

从本地获取存储的联系方式很简单，只需要使用 localStorage 或 sessionStorage 的 getItem() 方法即可。例如，获取之前存储的电子邮件地址：

const storedEmail = localStorage.getItem('email');
console.log(storedEmail); // 输出存储的电子邮件地址

4.2 从服务器获取

从服务器获取存储的联系方式，需要使用后端编程语言来处理获取联系方式的逻辑。以下示例以Node.js为例，演示如何使用Express框架向前端发送存储的联系方式：

// app.js
const express = require('express');
const app = express();

app.get('/contact', (req, res) => {
  const storedEmail = 'example@example.com'; // 从数据库或其他存储介质中获取电子邮件地址
  res.json({ email: storedEmail });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

上面的代码中，使用Express的 get() 方法创建一个接收GET请求的路由，该路由对应的URL为 /contact。在回调函数中，我们可以根据实际情况获取存储的联系方式，例如从数据库或其他存储介质中查询并获取电子邮件地址。

然后，在前端代码中，使用AJAX或fetch来发送GET请求到服务器获取存储的联系方式：

fetch('/contact')
.then(response => response.json())
.then(data => {
  const storedEmail = data.email;
  // 使用存储的电子邮件地址进行相关操作
})
.catch(error => {
  // 请求发送失败
});

上面的代码中，使用fetch函数向URL /contact 发送了一个GET请求，获取存储的联系方式。通过 response.json() 方法将响应转换为JSON格式，并通过 data.email 获取存储的电子邮件地址进行相关操作。