能否通过jQuery将文本框值存入Redis并实现跨页面读取？

嘿，这个问题很典型！直接用jQuery操作Redis是行不通的——因为Redis是服务器端的内存数据库，前端的JavaScript（包括jQuery）没办法直接和它建立连接。不过别担心，我们可以通过「前端jQuery调用后端接口 + 后端操作Redis」的组合，完美实现你要的“点击按钮存值、切换页面取值”的需求。

核心逻辑梳理 #

前端（jQuery）负责和用户交互（获取输入、触发动作），然后通过AJAX把数据传给后端；后端负责和Redis通信，完成数据的存储和读取；最后再把结果返回给前端。

具体实现步骤 #

1. 准备后端接口（以Node.js + Express为例） #

首先你需要一个后端服务来对接Redis，这里用Node.js的Express框架举例子，先确保你已经安装了express和redis依赖：

npm install express redis

然后写后端代码：

const express = require('express');
const redis = require('redis');
const app = express();
const port = 3000;

// 连接Redis客户端
const client = redis.createClient({
  host: 'localhost', // 你的Redis服务地址
  port: 6379 // Redis默认端口
});

client.on('error', (err) => console.log('Redis Client Error', err));
client.connect();

// 解析JSON请求体
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 接口1：存储数据到Redis
app.post('/save-to-redis', async (req, res) => {
  const { inputValue } = req.body;
  if (!inputValue) {
    return res.status(400).send('输入值不能为空');
  }
  // 用固定的键名存储，比如"user_input"，方便后续读取
  await client.set('user_input', inputValue);
  res.send('数据已成功存入Redis');
});

// 接口2：从Redis读取数据
app.get('/get-from-redis', async (req, res) => {
  const value = await client.get('user_input');
  res.json({ data: value });
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

2. 前端jQuery代码实现 #

页面1：存数据的页面（比如index.html）

这个页面有一个文本框和按钮，点击按钮就把文本框的值传给后端存入Redis：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="inputBox" placeholder="输入要存储的内容">
  <button id="saveBtn">保存到Redis</button>

  <script>
    $(document).ready(() => {
      $('#saveBtn').click(() => {
        const inputValue = $('#inputBox').val().trim();
        if (!inputValue) {
          alert('请输入内容');
          return;
        }
        // 用AJAX发送POST请求到后端接口
        $.ajax({
          url: 'http://localhost:3000/save-to-redis',
          method: 'POST',
          data: { inputValue: inputValue },
          success: (response) => {
            alert(response);
            $('#inputBox').val(''); // 清空输入框
          },
          error: () => {
            alert('存储失败，请检查后端服务');
          }
        });
      });
    });
  </script>
</body>
</html>

页面2：取数据的页面（比如detail.html）

这个页面加载时，自动从后端获取Redis里存储的值：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>从Redis读取的内容：<span id="displayContent"></span></div>

  <script>
    $(document).ready(() => {
      // 页面加载时发送GET请求获取数据
      $.ajax({
        url: 'http://localhost:3000/get-from-redis',
        method: 'GET',
        success: (response) => {
          $('#displayContent').text(response.data || '暂无数据');
        },
        error: () => {
          $('#displayContent').text('读取失败，请检查后端服务');
        }
      });
    });
  </script>
</body>
</html>

注意事项 #

• 确保你的Redis服务已经启动，并且后端配置的Redis地址和端口正确。
• 如果前端和后端不在同一个域名下，要处理跨域问题（可以在Express后端用cors中间件解决）。
• 实际项目中，建议给Redis的键名加上业务前缀（比如myapp:user_input），避免键名冲突。

内容的提问来源于stack exchange，提问作者Дмитрий Смирнов