js怎么保存到cookies

JS如何保存到Cookies

在JavaScript中，保存数据到cookies的主要方法包括创建cookie、设置cookie的过期时间、读取cookie值。其中，设置cookie的过期时间是比较重要的一环，因为它决定了cookie的有效期。

设置cookie的过程可以通过document.cookie属性完成，具体步骤如下：

1. 创建一个简单的cookie；
2. 设置cookie的过期时间；
3. 读取cookie的值。

一、创建和设置cookie

创建cookie非常简单，可以使用document.cookie属性。这个属性允许你设置一个新的cookie，格式为"key=value"。例如，以下代码将创建一个名为"user"的cookie，值为"John Doe"：

document.cookie = "user=John Doe";

二、设置cookie的过期时间

默认情况下，cookie在浏览器会话结束时（即浏览器关闭时）过期。为了使cookie在浏览器关闭后仍然有效，你需要设置cookie的过期时间。这可以通过在设置cookie时添加expires属性来实现。例如，以下代码将创建一个名为"user"的cookie，值为"John Doe"，并在7天后过期：

let d = new Date();

d.setTime(d.getTime() + (7*24*60*60*1000)); // 设置过期时间为7天
let expires = "expires="+ d.toUTCString();
document.cookie = "user=John Doe; " + expires;

三、读取cookie的值

读取cookie的值相对复杂一些，因为所有的cookie都存储在一个字符串中，并以分号分隔。你可以通过以下代码读取特定cookie的值：

function getCookie(cname) {

    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

四、删除cookie

删除cookie的方法是设置其过期时间为一个过去的时间点。例如，以下代码将删除名为"user"的cookie：

document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

五、Cookie的安全性

在使用cookie时，还需要注意其安全性。可以通过设置secure和HttpOnly属性来提高cookie的安全性。secure属性确保cookie只能通过HTTPS发送，而HttpOnly属性则防止JavaScript访问cookie。

document.cookie = "user=John Doe; " + expires + "; path=/; secure; HttpOnly";

六、综合示例

下面是一个完整的示例，包括创建、设置、读取和删除cookie的代码：

// 设置cookie

function setCookie(cname, cvalue, exdays) {
    let d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
}
// 读取cookie
function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
// 删除cookie
function deleteCookie(cname) {
    document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
// 示例使用
setCookie("user", "John Doe", 7); // 设置一个名为"user"的cookie，有效期为7天
console.log(getCookie("user")); // 读取名为"user"的cookie
deleteCookie("user"); // 删除名为"user"的cookie

通过上述步骤和代码，你可以在JavaScript中方便地创建、设置、读取和删除cookie，从而实现数据的持久化存储。

相关问答FAQs：

1. 如何使用JavaScript将数据保存到cookies中？

JavaScript提供了document.cookie属性来保存数据到cookies中。您可以通过设置document.cookie属性的值来实现。例如，要保存名为"username"的cookie，您可以使用以下代码：

document.cookie = "username=John Doe";

2. 如何在JavaScript中读取cookies的值？

要读取保存在cookies中的值，您可以使用document.cookie属性。它将返回一个包含所有cookies的字符串。为了获取特定的cookie值，您可以编写一个函数来解析这个字符串并提取所需的值。例如，以下代码演示了如何获取名为"username"的cookie值：

function getCookieValue(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 "";
}

var username = getCookieValue("username");

3. 如何设置cookies的过期时间？

您可以通过在设置cookie时添加一个expires属性来指定cookies的过期时间。expires属性的值应该是一个表示日期和时间的字符串。例如，要将cookie的过期时间设置为一天后，您可以使用以下代码：

var date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 24小时的毫秒数
var expires = "expires=" + date.toUTCString();

document.cookie = "username=John Doe;" + expires;

请注意，expires属性只接受GMT格式的日期字符串。