js取cookie怎么存取

要使用JavaScript存取Cookie，可以通过document.cookie属性进行操作。具体步骤包括设置、读取和删除Cookie等。下面将详细介绍这些操作。

一、设置Cookie

1、基本设置

设置Cookie主要通过document.cookie属性来实现。基本语法如下：

document.cookie = "username=John Doe";

这个语句会在浏览器中设置一个名为username，值为John Doe的Cookie。

2、设置过期时间

为了让Cookie在特定时间后过期，可以使用expires属性。expires属性接受一个UTC格式的日期字符串。例如：

let date = new Date();

date.setTime(date.getTime() + (7*24*60*60*1000)); // 7天后过期
let expires = "expires=" + date.toUTCString();
document.cookie = "username=John Doe;" + expires + ";path=/";

3、设置路径

通过path属性，可以限定Cookie在哪些路径下可用。例如：

document.cookie = "username=John Doe;path=/mydir";

这样设置后，只有在/mydir路径及其子路径下，才能读取到这个Cookie。

4、设置域名

通过domain属性，可以指定Cookie在哪个域名下可用。例如：

document.cookie = "username=John Doe;domain=example.com";

这样设置后，example.com及其子域名都可以访问这个Cookie。

5、设置安全标志

通过secure属性，可以指定Cookie只能通过HTTPS协议传输。例如：

document.cookie = "username=John Doe;secure";

6、设置HttpOnly标志

通过HttpOnly属性，可以指定Cookie只能通过HTTP协议传输，JavaScript无法访问。例如：

document.cookie = "username=John Doe;HttpOnly";

二、读取Cookie

读取Cookie时，同样使用document.cookie属性。需要注意的是，document.cookie返回的是一个包含所有Cookie的字符串，而不是某个特定的Cookie。

1、读取所有Cookie

let allCookies = document.cookie;

console.log(allCookies);

这将返回一个形如"username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/"的字符串。

2、读取特定Cookie

为了读取特定的Cookie，可以将document.cookie字符串分割成一个数组，然后遍历这个数组。例如：

function getCookie(name) {

    let cookieArr = document.cookie.split(";");
    for(let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}
let username = getCookie("username");
console.log(username);

三、删除Cookie

删除Cookie的基本原理是设置一个已经过期的日期。例如：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

1、删除特定路径下的Cookie

如果Cookie的path属性被设置了，删除时也需要指定相同的路径。例如：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/mydir;";

2、删除特定域名下的Cookie

如果Cookie的domain属性被设置了，删除时也需要指定相同的域名。例如：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=example.com; path=/";

四、实现Cookie管理的实用工具函数

为了简化Cookie的管理，可以创建一些实用工具函数。例如：

// 设置Cookie

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 获取Cookie
function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
// 删除Cookie
function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

通过这些函数，可以更加方便地设置、读取和删除Cookie。例如：

setCookie("username", "John Doe", 7);

let username = getCookie("username");
console.log(username);
eraseCookie("username");

五、Cookie与项目管理系统的集成

在项目管理系统中，使用Cookie可以帮助实现用户会话管理、偏好设置等功能。以下是如何在项目管理系统中集成Cookie的示例。

1、用户会话管理

在用户登录时，可以使用Cookie存储会话信息。例如：

function loginUser(username, sessionToken) {

    setCookie("username", username, 1);
    setCookie("sessionToken", sessionToken, 1);
}

在用户访问项目管理系统的各个页面时，可以通过读取Cookie来验证用户会话。例如：

function checkUserSession() {

    let sessionToken = getCookie("sessionToken");
    if (!sessionToken) {
        // 重定向到登录页面
        window.location.href = "/login";
    }
}

2、用户偏好设置

用户可以通过Cookie存储他们的偏好设置。例如：

function saveUserPreferences(theme, language) {

    setCookie("theme", theme, 30);
    setCookie("language", language, 30);
}
function loadUserPreferences() {
    let theme = getCookie("theme");
    let language = getCookie("language");
    // 根据用户偏好设置，调整页面显示
    if (theme) {
        document.body.className = theme;
    }
    if (language) {
        // 切换语言
    }
}

3、与项目管理系统的集成

在项目管理系统中，如研发项目管理系统PingCode和通用项目协作软件Worktile，可以通过Cookie存储用户的特定配置和状态。例如：

function saveProjectSettings(projectId, settings) {

    let settingsStr = JSON.stringify(settings);
    setCookie("project_" + projectId + "_settings", settingsStr, 7);
}
function loadProjectSettings(projectId) {
    let settingsStr = getCookie("project_" + projectId + "_settings");
    if (settingsStr) {
        return JSON.parse(settingsStr);
    }
    return null;
}

通过这样的方式，可以方便地在不同页面之间共享用户配置，提高用户体验。

六、总结

通过以上介绍，我们详细讲解了如何使用JavaScript设置、读取和删除Cookie，并提供了一些实用的工具函数。同时，我们还探讨了Cookie在项目管理系统中的应用，例如用户会话管理和偏好设置。希望这些内容能够帮助你在实际开发中更好地管理Cookie，提高系统的用户体验。

相关问答FAQs：

1. 如何使用JavaScript存储Cookie？

JavaScript中使用document.cookie属性可以存储Cookie。您可以使用以下语法将Cookie存储到浏览器中：

document.cookie = "cookieName=cookieValue; expires=cookieExpiry; path=cookiePath";

其中，cookieName是您指定的Cookie名称，cookieValue是您想要存储的值。expires是Cookie的过期时间，cookieExpiry应该是一个合法的日期字符串。path是可选的，用于指定Cookie的路径。

2. 如何使用JavaScript获取Cookie的值？

要获取Cookie的值，可以使用以下JavaScript代码：

function getCookie(cookieName) {
  var name = cookieName + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var cookieArray = decodedCookie.split(';');
  
  for(var i = 0; i < cookieArray.length; i++) {
    var cookie = cookieArray[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  
  return "";
}

您可以通过调用getCookie(cookieName)函数并传入Cookie的名称来获取Cookie的值。

3. 如何在JavaScript中删除Cookie？

要删除Cookie，您可以将Cookie的过期时间设置为过去的日期，这样浏览器会自动将其删除。例如：

function deleteCookie(cookieName) {
  document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

通过调用deleteCookie(cookieName)函数并传入要删除的Cookie的名称，即可删除该Cookie。