JS实现Cookie读、写、删除操作工具类示例

下面就是详细讲解“JS实现Cookie读、写、删除操作工具类示例”的完整攻略。

什么是Cookie？

先来简单介绍一下什么是Cookie。Cookie是一种在客户端（浏览器）存储数据的技术，用于存储各种信息，如登录状态、用户个性化设置、购物车商品等。Cookie的使用可以在服务器端通过响应头设置Cookie，在客户端通过document.cookie读取和修改Cookie。

实现Cookie读、写、删除操作

在实际开发中，我们可能需要对Cookie进行读、写、删除等操作。下面我们就来介绍如何通过JS实现Cookie读、写、删除操作。

1. Cookie的写入

要将数据写入Cookie，可以通过设置document.cookie实现。以下是一个示例代码：

function setCookie(cname,cvalue,exhours) {
    var d = new Date();
    d.setTime(d.getTime() + (exhours*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

这段代码定义了一个名为setCookie的函数，函数接收三个参数：cookie的名称、cookie的值和cookie的过期时间（单位：小时）。在函数内部，通过设置 expires 变量，指定了 cookie 的过期时间，并调用 document.cookie 设置 cookie 的名称和值，以及 path 属性设置 cookie 的路径。

2. Cookie的读取

要从Cookie中读取数据，可以通过读取document.cookie实现。以下是一个示例代码：

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

这段代码定义了一个名为getCookie的函数，函数接收一个参数：cookie的名称。在函数内部，通过调用 document.cookie 获取所有 cookie，并通过 split 函数将所有 cookie 分割成单个 cookie。之后再循环遍历所有 cookie，如果找到指定的 cookie 则返回其值。如果没有找到则返回空字符串。

3. Cookie的删除

要从Cookie中删除一个Cookie，可以通过设置它的过期时间为过去的时间来实现。以下是一个示例代码：

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

这段代码定义了一个名为deleteCookie的函数，函数接收一个参数：cookie的名称。在函数内部，通过设置 expires 属性为一个过去的时间，将该 cookie 的过期时间设置为过去的时间，从而达到删除该 cookie 的效果。需要注意的是，为了删除 cookie，path 属性要设置为根路径。

示例说明

下面是两个示例说明，帮助你更好的理解以上实现Cookie读、写、删除操作的代码：

示例一：

在这个示例中，我们实现了一个网站的主题设置功能，在切换主题时使用 Cookie 存储用户所选主题。以下是示例代码：

//获取cookie的值
function getTheme() {
    var theme = getCookie("theme");
    if(theme != "") {
        //应用主题
    } else {
        //使用默认主题
    }
}

//设置cookie的值
function setTheme(theme) {
    setCookie("theme", theme, 24);
    //应用主题
}

//删除cookie的值
function clearTheme() {
    deleteCookie("theme");
    //应用默认主题
}

//切换主题
function switchTheme(theme) {
    setTheme(theme);
}

在这个示例中，getTheme函数从Cookie中读取用户设置的主题，如果主题存在则应用该主题，否则使用默认主题。setTheme函数将用户所选主题存储到Cookie中，过期时间为24小时。clearTheme函数删除Cookie中的主题，应用默认主题。switchTheme函数是切换主题的入口函数，该函数接收用户所选主题作为参数。

示例二：

在这个示例中，我们实现了使用Cookie来存储购物车数据。以下是示例代码：

//添加商品到购物车
function addToCart(product) {
    var cart = getCookie("cart");
    if(cart != "") {
        var cartArray = JSON.parse(cart);
    } else {
        var cartArray = [];
    }
    cartArray.push(product);
    var cartJSON = JSON.stringify(cartArray);
    setCookie("cart", cartJSON, 24);
}

//从购物车中移除商品
function removeFromCart(product) {
    var cart = getCookie("cart");
    if(cart != "") {
        var cartArray = JSON.parse(cart);
        var index = cartArray.indexOf(product);
        if(index != -1) {
            cartArray.splice(index, 1);
            var cartJSON = JSON.stringify(cartArray);
            setCookie("cart", cartJSON, 24);
        }
    }
}

//显示购物车列表
function showCart() {
    var cart = getCookie("cart");
    if(cart != "") {
        var cartArray = JSON.parse(cart);
        //显示购物车列表
    } else {
        //显示购物车为空
    }
}

在这个示例中，addToCart函数将商品添加到购物车中，首先从 Cookie 中读取已有的购物车数据，如果购物车不为空，则解析 JSON 格式的购物车数据为数组，如果购物车为空，则定义一个空数组。之后将商品添加到购物车中，再将购物车数组转换为 JSON 字符串，最后将购物车数据存储到 Cookie 中。removeFromCart函数从购物车中移除商品，先从 Cookie 中读取购物车数据，并将其解析为购物车数组，然后找到要移除的商品在数组中的索引，如果存在则将其从购物车数组中移除，最后将购物车数据重新存储到 Cookie 中。showCart函数从 Cookie 中读取购物车数据并解析为数组，然后将购物车数组数据渲染到页面上，以供用户查看。