JavaScript客户端存储与PHP服务器会话数据交互指南

// 1. 从 sessionStorage 获取数据
const clientData = sessionStorage.getItem('test-name');

if (clientData) {
    // 2. 构造要发送到服务器的数据
    const dataToSend = {
        key: 'test-name',
        value: clientData
    };

    // 3. 使用 fetch API 发送 POST 请求到服务器
    fetch('/api/save-session-data', { // 假设这是你的API端点
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest' // 可选，用于服务器端判断是否为AJAX请求
        },
        body: JSON.stringify(dataToSend) // 将数据转换为JSON字符串
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json(); // 解析服务器返回的JSON响应
    })
    .then(data => {
        console.log('数据已成功保存到服务器会话:', data);
        // 可以在这里处理服务器返回的成功信息
    })
    .catch(error => {
        console.error('保存数据到服务器会话失败:', error);
        // 可以在这里处理错误
    });
} else {
    console.log('sessionStorage 中没有找到 "test-name" 的数据。');
}

// src/Controller/ApiController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Session\SessionInterface;

class ApiController extends AbstractController
{
    /**
     * @Route("/api/save-session-data", name="api_save_session_data", methods={"POST"})
     */
    public function saveSessionData(Request $request, SessionInterface $session): JsonResponse
    {
        // 1. 检查请求是否为JSON格式
        if ('application/json' !== $request->headers->get('Content-Type')) {
            return new JsonResponse(['status' => 'error', 'message' => 'Invalid Content-Type'], JsonResponse::HTTP_BAD_REQUEST);
        }

        // 2. 解析请求体中的JSON数据
        $data = json_decode($request->getContent(), true);

        // 3. 验证数据
        if (!isset($data['key']) || !isset($data['value'])) {
            return new JsonResponse(['status' => 'error', 'message' => 'Missing key or value in request body'], JsonResponse::HTTP_BAD_REQUEST);
        }

        $key = $data['key'];
        $value = $data['value'];

        // 4. 将数据存储到PHP会话中
        $session->set($key, $value);

        // 5. 返回成功响应
        return new JsonResponse(['status' => 'success', 'message' => 'Data saved to session successfully', 'key' => $key, 'value' => $value]);
    }

    /**
     * @Route("/api/get-session-data/{key}", name="api_get_session_data", methods={"GET"})
     */
    public function getSessionData(string $key, SessionInterface $session): JsonResponse
    {
        // 从PHP会话中获取数据
        $value = $session->get($key);

        if (null !== $value) {
            return new JsonResponse(['status' => 'success', 'key' => $key, 'value' => $value]);
        } else {
            return new JsonResponse(['status' => 'error', 'message' => 'Key not found in session'], JsonResponse::HTTP_NOT_FOUND);
        }
    }
}

// 假设我们要获取PHP会话中名为 'user_id' 的数据
const keyToRetrieve = 'user_id';

fetch(`/api/get-session-data/${keyToRetrieve}`, {
    method: 'GET',
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
})
.then(data => {
    if (data.status === 'success') {
        console.log(`从服务器会话获取到数据: ${data.key} = ${data.value}`);
        // 可以将获取到的数据存储到客户端，例如 sessionStorage 或 JavaScript 变量
        sessionStorage.setItem(data.key, data.value);
    } else {
        console.error('从服务器会话获取数据失败:', data.message);
    }
})
.catch(error => {
    console.error('获取数据失败:', error);
});