ajax 写cookie

AJAX（Asynchronous JavaScript and XML）是一种用于在Web浏览器中与服务器进行异步通信的技术。它可以在不重新加载整个页面的情况下更新部分页面内容，从而提高用户的交互体验。在开发过程中，有时需要将一些数据保存在客户端，以便在页面刷新或用户下次访问时使用。Cookie是一种在Web浏览器中存储数据的机制。结合AJAX和Cookie，我们可以通过异步请求将数据写入Cookie，并在需要的时候使用。

ajax 写cookie

假设我们正在开发一个购物车功能，用户点击“添加到购物车”按钮时，我们希望将商品信息保存在Cookie中。通过AJAX发送异步请求，我们可以将商品信息发送给服务器，并在服务器端将对应的数据保存在Cookie中。下次用户访问网页时，我们可以从Cookie中获取已保存的商品信息，并展示在购物车中。

function addToCart(productId) {
  // 假设商品信息为 { id: productId,name: 'Example',price: 99.99 }
  var product = {
    id: productId,price: 99.99
  };

  // 使用AJAX异步请求将商品信息保存在Cookie中
  var xhr = new XMLHttpRequest();
  xhr.open('POST','/save-to-cookie',true);
  xhr.setRequestHeader('Content-Type','application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('商品已添加到购物车！');
    }
  };
  xhr.send(JSON.stringify(product));
}

在上述代码中，我们定义了一个函数`addToCart`，它接收商品的ID作为参数。在函数内部，我们创建了一个`product`对象，包含商品的名称、价格等信息。然后，我们使用AJAX发送异步请求，将商品信息以JSON格式发送给服务器。服务器端接收到请求后，将商品信息保存在Cookie中。在响应返回后，我们弹出一个提示框，以告知用户商品已成功添加到购物车。

接下来，让我们来看一下服务器端的代码，如何将商品信息保存在Cookie中。

app.post('/save-to-cookie',(req,res) => {
  var product = req.body;

  // 将商品信息保存在Cookie中
  res.cookie('cart',JSON.stringify(product));

  res.sendStatus(200);
});

在服务器端，我们使用`express`框架创建了一个POST路由，监听`/save-to-cookie`路径。当接收到该请求时，我们获取到请求体中的商品信息，并使用`res.cookie`方法将其保存在名为`cart`的Cookie中。为了验证操作的结果，我们简单地发送一个状态码200作为响应。

随后，我们可以在网站的其他页面中读取并使用Cookie中保存的商品信息。

app.get('/cart',res) => {
  var cart = req.cookies.cart;

  // 读取Cookie中的商品信息并展示在购物车页面
  res.render('cart',{ cart: JSON.parse(cart) });
});

当用户访问`/cart`路径时，服务器将从请求中读取名为`cart`的Cookie，并将其作为数据传递给购物车页面的模板引擎。购物车页面模板可以根据该数据展示用户的购物车信息。

上述例子展示了如何使用AJAX写入Cookie，并在需要时读取并使用Cookie。然而，需要注意在进行以上操作时，必须确保页面已经加载完成，并且用户已经登录或同意使用Cookie。

总之，AJAX可以与Cookie配合使用，通过异步请求将数据写入Cookie，并在需要时读取并使用Cookie。这种方式可以提供更好的用户体验，使网站更加灵活和交互性强。

相关推荐