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


相关推荐: Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何获取免费开源的自助建站系统源码?  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  如何在IIS7中新建站点?详细步骤解析  香港服务器租用费用高吗?如何避免常见误区?  Laravel如何使用Eloquent ORM进行数据库操作?(CRUD示例)  lovemo网页版地址 lovemo官网手机登录  Laravel怎么在Controller之外的地方验证数据  如何在万网利用已有域名快速建站?  利用vue写todolist单页应用  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  简单实现jsp分页  Laravel集合Collection怎么用_Laravel集合常用函数详解  如何在宝塔面板中创建新站点?  昵图网官方站入口 昵图网素材图库官网入口  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  高防服务器:AI智能防御DDoS攻击与数据安全保障  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  小米17系列还有一款新机?主打6.9英寸大直屏和旗舰级影像  iOS UIView常见属性方法小结  Android使用GridView实现日历的简单功能  佛山网站制作系统,佛山企业变更地址网上办理步骤?  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel如何保护应用免受CSRF攻击?(原理和示例)  WEB开发之注册页面验证码倒计时代码的实现  Laravel如何使用查询构建器?(Query Builder高级用法)  如何基于云服务器快速搭建个人网站?  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Laravel如何使用Socialite实现第三方登录?(微信/GitHub示例)  iOS验证手机号的正则表达式  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Laravel如何实现数据库事务?(DB Facade示例)  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  如何在Ubuntu系统下快速搭建WordPress个人网站?  如何在 React 中条件性地遍历数组并渲染元素  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  Laravel如何为API编写文档_Laravel API文档生成与维护方法  详解jQuery停止动画——stop()方法的使用  linux top下的 minerd 木马清除方法  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  再谈Python中的字符串与字符编码(推荐)  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  bing浏览器学术搜索入口_bing学术文献检索地址  Laravel如何操作JSON类型的数据库字段?(Eloquent示例)  Laravel storage目录权限问题_Laravel文件写入权限设置  如何快速搭建虚拟主机网站?新手必看指南  Laravel如何发送系统通知?(Notification渠道示例)