Javascript 对cookie操作详解及实例_网络技术_宿州市腾雀网络科技有限公司

Javascript 对cookie操作详解及实例

发布时间 - 2026-01-10 22:11:39 点击率：次

js 操作 cookie 的方法

cookie

cookie，有时候也用其复数形式Cookies，指某些网站为了辨别用户身份，进行session跟踪而储存在用户本地终端上的数据（经常通过加密）。定义于RFC2109和2965都已废弃，最新取代的规范是RFC6265。

cookie的作用

服务器可以利用Cookie包含信息的任意性来筛选经常性维护这些信息，以判断在HTTP传输中的状态。Cookie最典型的英语是判断注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录步骤，浙西都是Cookie的功能。另一个重要张合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookie，以便在最后付款时提取信息。

js设置cookie

document.cookie="key=value";
//例
document.cookie="name=weiqi";

//可以在控制台中打印出cookie
console.log(document.cookie);

如何修改和获取cookie

js中并没有提供获取cookie的方法，所以只能自己封装方法，相同的key的cookie只能存在一个，如果定义了一个document.cookie="age=21",后面又定义了document.cookie="age=30"，那么后面定义的cookie会覆盖前面定义的cookie，所以修改cookie值的时候只用重新定义个key相同的cookie就可以了。那么获取cookie的时候也只用在cookie中获取到这个key后面的“=”和“；”直接的字符串，那就是这个cookie的值了，获取的方法又很多种，这里我写一种比较简单的：

function getCookie(key){
  var index = document.cookie.indexOf(key);
  var returnValue;
  if(index!==-1){
    var tIndex = document.cookie.indexOf(";",index);
    var target = document.cookie.substring(index,tIndex);
    var returnValue = decodeURIComponent(target.replace(key+"=",""))
  }
  return returnValue;
}

document.cookie="name=weiqi";
getCookie("name"); //weiqi

删除cookie

cookie是有有效期的，前面我们设置cookie的时候都没有设置有效期，如果我们将cookie的有效期设置成一个已经过去的时间，那么它就无效了，下面来实现一下：

function delCookie(key){
  var d = new Date();
  document.cookie=key+"=;expires="+ d.toGMTString();
}

document.cookie="name=weiqi";
delCookie("name"); //undefined

给cookie设置一个有效期

通过expires给cookie设置一个有效期，现在我们设置一个cookie的有效期是10天，如下：

var d = new Date();
var time = 10;
d.setTime(d.getTime()+time*1000*60*60*24);
document.cookie="name=weiqi;expires="+ d.toGMTString();

封装cookie

将自定义的一些方法完善一下封装成一个对象，这样在使用的时候就可以直接拿来用了：

//封装cookie方法的对象
var cookie = {
  setCookie:function(key,value,time){
    if(key == undefined){
      return;
    }
    if(time!== undefined){
      var d = new Date();
      d.setTime(d.getTime()+time*1000*60*60*24);
      document.cookie=key+"="+value+";expires="+ d.toGMTString();
    }else{
      document.cookie=key+"="+value;
    }
  },
  getCookie:function(key){
    var index = document.cookie.indexOf(key);
    var returnValue;
    if(index!==-1){
      var tIndex = document.cookie.indexOf(";",index);
      var target = document.cookie.substring(index,tIndex);
      var returnValue = decodeURIComponent(target.replace(key+"=",""))
     }
    return returnValue;
  },
  delCookie:function(key){
    var d = new Date();
    document.cookie=key+"=;expires="+ d.toGMTString();
  }
}


//测试
cookie.setCookie("home")
cookie.setCookie("name","卫旗");
cookie.setCookie("age",22);
cookie.setCookie("sex","男")
cookie.getCookie("sex")
cookie.delCookie("age")

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# js # 操作 # cookie # Javascript # cookie操作方法 # JS实现Cookie读、写、删除操作工具类示例 # javascript 中Cookie读、写与删除操作 # javascript 操作cookies详解及实例 # javascript操作cookie # JS中对Cookie的操作详解 # JS封装cookie操作函数实例(设置、读取、删除) # javascript操作Cookie（设置、读取、删除）方法详解 # js中的cookie的读写操作示例详解 # JS操作Cookie写入和读取实例代码 # JS操作Cookies包括(读取添加与删除) # JavaScript实现cookie的操作 # 就可以 # 都是 # 是有 # 会在 # 用了 # 希望能 # 注册用户 # 自定义 # 英语 # 购物车 # 都已 # 谢谢大家 # 它就 # 用在 # 来实现 # 我写 # 可以利用 # 也用 # 设置成 # 最典型

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：蜂巢云建站系统：SEO优化+长尾词布局+核心关键词整合指南

下一篇：PowerPoint中插入Logo设计_PPT Logo导入

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：蜂巢云建站系统：SEO优化+长尾词布局+核心关键词整合指南

下一篇：PowerPoint中插入Logo设计_PPT Logo导入