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 中读取购物车数据并解析为数组,然后将购物车数组数据渲染到页面上,以供用户查看。

总结

以上就是关于如何通过JS实现Cookie读、写、删除操作的完整攻略以及两个示例的说明。在实际开发中需要灵活运用 Cookie 技术,根据具体业务场景的要求进行读、写、删除等 Cookie 操作。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现Cookie读、写、删除操作工具类示例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • vue使用axios实现excel文件下载的功能

    下面是使用Vue和Axios实现Excel文件下载的攻略,过程中将会包含两条示例说明。 准备工作 安装依赖:npm install –save axios file-saver xlsx 其中,axios 是我们将用来与后端交互的网络请求库;file-saver 是将文件保存到本地的库;xlsx 将Excel文件转换为二进制格式。 在 main.js 中导…

    JavaScript 2023年6月11日
    00
  • 业务层hooks封装useSessionStorage实例详解

    “业务层hooks封装useSessionStorage实例详解”说明了如何使用React Hooks封装一个自定义的钩子函数useSessionStorage,来实现将数据存储到浏览器的Session Storage中。下面,我将为您详细讲解这一攻略的过程及示例。 一、为什么需要使用Session Storage? 浏览器提供了三种方式用于客户端存储数据:…

    JavaScript 2023年6月11日
    00
  • Typescript中函数类型及示例详解

    Typescript中的函数类型可以通过声明函数的参数类型、返回值类型及函数主体来限制函数的使用。在使用Typescript开发中,了解函数类型及其使用方法是非常重要的,下面介绍Typescript中函数类型的详细攻略。 一、函数类型的定义 在Typescript中,可以使用以下两种方式来定义函数类型: 1.函数声明式定义函数类型 如下例所示,我们使用声明式…

    JavaScript 2023年6月10日
    00
  • JavaScript自动内存管理与垃圾回收策略详细分析讲解

    JavaScript自动内存管理与垃圾回收策略详细分析 在JavaScript中,内存管理是自动化的,这意味着开发人员不需要手动分配或释放内存,这是由JavaScript引擎中的垃圾回收器自动完成的。了解垃圾回收策略对于JavaScript开发人员来说非常重要,因为它可以显著影响到性能和内存占用。 JavaScript中的内存管理 JavaScript中的内…

    JavaScript 2023年6月10日
    00
  • JavaScript实现加密与解密详解

    JavaScript实现加密与解密详解 在现代应用程序中,数据的安全性非常重要。其中一种保护数据安全的方式是使用加密算法。JavaScript是一种流行的编程语言,经常用于在浏览器中实现安全性。 本文将详细讲解使用JavaScript实现加密和解密的详细步骤,包括两个示例。 加密 Base64加密 Base64是一种用于数据传输的编码方案。它将任意二进制数据…

    JavaScript 2023年5月19日
    00
  • 如何进行微信公众号开发的本地调试的方法

    如何进行微信公众号开发的本地调试 微信公众号开发的本地调试可以帮助开发人员在本地环境中快速进行代码调试和测试,从而加快开发效率。下面是进行微信公众号开发的本地调试的具体步骤。 步骤一:创建微信公众号开发者账号 首先需要在微信公众平台上注册一个开发者账号。注册成功后,可以创建一个微信公众号并获取到开发者ID和开发者密钥。 步骤二:下载安装微信公众号调试工具 可…

    JavaScript 2023年6月11日
    00
  • javascript和jquery实现用户登录验证

    下面是详细讲解“javascript和jquery实现用户登录验证”的完整攻略: 前言 用户登录验证是网站开发中一个重要的环节,对于保障用户信息和网站安全具有重要作用。本文将介绍如何使用JavaScript和jQuery实现用户登录验证的相关操作。 准备工作 在开始实现登录验证之前,需要准备以下工作: 一个表单页面,用于用户输入用户名和密码; 一个后端页面,…

    JavaScript 2023年6月10日
    00
  • javascript不同类型数据之间的运算的转换方法

    下面是关于 JavaScript 不同类型数据之间的运算的转换方法的攻略: 类型转换 JavaScript 是一种弱类型语言,允许不同类型之间的运算。但是,不同的类型进行运算时会出现意想不到的结果。为了确保正确的运算结果,我们需要将不同类型的数据转换成相同的类型。 JavaScript 提供了三种类型转换方法: 转换为字符串 转换为数值 转换为布尔值 转换为…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部