uniapp如何设置cookie

我在使用uniapp开发时遇到了cookie设置的问题。官方文档里提到uni.request默认不支持cookie，但实际项目中需要用到cookie保持会话状态。想问下：

  1. 在uniapp中如何正确设置和发送cookie？
  2. H5端和APP端的处理方式有什么区别吗？
  3. 需要额外配置什么参数或插件吗？
  4. 有没有完整的代码示例可以参考？

求各位大佬指点，谢谢！

2 回复

uniapp不能直接设置cookie，因为它是跨端框架。可以用uni.setStorageSync存储数据，或用uni.request的header传token。H5端可以用document.cookie，但其他端不支持。


在uni-app中，由于运行环境多样（如H5、小程序、App），设置Cookie的方式因平台而异。以下是各环境下的处理方法：

1. H5 环境（浏览器）

在H5中可以直接使用标准 document.cookie API：

// 设置Cookie
document.cookie = "key=value; expires=过期时间; path=/";

// 示例：设置名为token的Cookie，7天后过期
let date = new Date();
date.setDate(date.getDate() + 7);
document.cookie = `token=abc123; expires=${date.toUTCString()}; path=/`;

2. 小程序环境

小程序不支持Cookie，替代方案：

  • 使用全局变量或Vuex存储数据
  • 使用uni.setStorageSync本地存储：
// 存储数据
uni.setStorageSync('token', 'abc123');

// 获取数据
let token = uni.getStorageSync('token');

3. App 环境

App端同样推荐使用本地存储：

// 存储数据
uni.setStorageSync('userInfo', {name: '张三', id: 1});

// 获取数据
let userInfo = uni.getStorageSync('userInfo');

4. 跨平台兼容方案

// 判断平台并统一处理
function setData(key, value) {
  // #ifdef H5
  document.cookie = `${key}=${value}; path=/`;
  // #endif
  
  // #ifndef H5
  uni.setStorageSync(key, value);
  // #endif
}

// 使用示例
setData('token', 'abc123');

注意事项：

  • H5 Cookie限制：注意域名、路径和跨域问题
  • 存储容量：Cookie约4KB，Storage约5-10MB
  • 数据持久性：Cookie可设置过期时间，Storage持久存储

根据你的具体需求选择合适的存储方式，通常推荐使用uni-app的Storage API实现跨平台兼容。

回到顶部