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日

相关文章

  • JS中利用FileReader实现上传图片前本地预览功能

    下面是详细讲解 JS 中利用 FileReader 实现上传图片前本地预览功能的完整攻略: 什么是 FileReader FileReader 是 HTML5 新增的一个 API,它允许网页异步读取存储在用户计算机上的文件数据,使用该 API 可以实现文件的预览、上传、加密等功能。 使用 FileReader 实现上传图片前本地预览功能的步骤 获取 file…

    JavaScript 2023年5月27日
    00
  • 正则表达式(RegExp)判断文本框中是否包含特殊符号

    使用正则表达式(RegExp)可以方便地判断文本框中是否包含特殊字符。以下是具体的步骤: 第一步:创建正则表达式 创建一个合适的正则表达式来匹配所需要的特殊字符,以及对应的需要匹配的字符数量,这里以匹配手机号码为例: var reg = /^[1][3,4,5,7,8][0-9]{9}$/; 上述正则表达式的含义是:以数字“1”开头,第二位是3、4、5、7或…

    JavaScript 2023年6月10日
    00
  • javascript强大的日期函数代码分享

    JavaScript强大的日期函数代码分享 日期和时间是我们在开发Web应用中最常用到的一个组件,JavaScript提供了丰富的API让我们更加便捷地处理日期和时间。下面将分享一些常用的日期函数及其代码实现。 Date对象 JavaScript中内置的Date对象提供了一些常用的处理日期和时间的方法,其中比较常用的有以下几个方法: getFullYear(…

    JavaScript 2023年5月27日
    00
  • 浅谈Javascript中Object与Function对象

    JavaScript中的所有数据都是对象,包括Object对象和Function对象。但是Object与Function对象不同,Object对象主要用于存储数据,而Function对象主要用于封装一些代码,实现逻辑的封装与复用。 Object对象 在JavaScript中,Object对象是所有对象的基类,其它对象都继承了Object对象。Object对象…

    JavaScript 2023年5月27日
    00
  • JS中DOM元素的attribute与property属性示例详解

    关于“JS中DOM元素的attribute与property属性示例详解”,我们可以从以下几个方面进行说明: 一、什么是DOM元素的attribute和property? DOM元素可以看做是一个JS对象,它有很多属性和方法,其中包括两个比较容易混淆的属性,分别是attribute和property。 attribute是DOM元素具有的属性,就是标签上的属…

    JavaScript 2023年6月10日
    00
  • JavaScript基于setTimeout实现计数的方法

    下面是JavaScript基于setTimeout实现计数的方法的攻略: 1. 使用setTimeout实现计数的基本思路 使用setTimeout函数可以在指定的时间之后执行一个函数。基于这个特性,我们可以通过函数的递归调用以及不断增加定时器的延迟时间来实现计数的功能。我们可以定义一个计数函数,每次调用时增加计数器的值,然后再通过setTimeout函数递…

    JavaScript 2023年6月10日
    00
  • JavaScript 笔记

    JavaScript 简介 JavsScript 于 1995 年由 Brendan Eich 用时 10 天写出,用于网景浏览器。最初的名字叫 LiveScript,也被部分员工称为 Mocha。那时 Java 语言很流行,出于商业化的考量,更名为 JavaScript,但两者之间没有关联。 最早的 JS 作为脚本语言给浏览器增加一些诸如鼠标跟随等交互性特…

    JavaScript 2023年5月7日
    00
  • js将列表组装成树结构的两种实现方式分享

    让我们来详细讲解“js将列表组装成树结构的两种实现方式分享”的完整攻略。 1. 背景 在开发网站时,经常会遇到需要将列表数据组装成树形结构的需求。比如,某个商品分类下有多个子分类,子分类又有自己的子分类,这就是一棵树形结构。如果我们只有一份列表数据,该如何将它组装成一棵树呢? 2. 实现方式一:递归 2.1 实现思路 递归是一种非常自然且直观的方法,它通过不…

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