Javascript 对cookie操作详解及实例
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写了一个方法，然后在image的onmouseover事件中调用此方法，这样在鼠标悬浮在小图上面的时候，其大图就会自动的显示出来。2013-03-03
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）2014-04-04
本文主要介绍了JS中splice添加或删除数组元素,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
这篇文章介绍了判断输入是否为空,获得输入类型的JS代码，有需要的朋友可以参考一下2013-10-10
这篇文章主要介绍了JavaScript中的变量作用域介绍,本文同时讲解了一个新概念变量的作用域链,需要的朋友可以参考下2014-12-12
JavaScript onclick点击事件-点击切换图片且自动播放
这篇文章主要介绍了JavaScript onclick点击事件-点击切换图片且自动播放，在页面中放图片并设置四个button，可以通过点击上一张下一张来切换图片，下面来看看具体的实现过程吧2022-01-01
对于html中的一些元素注册事件的方式有多种，接下来将为大家详细介绍下，大家可以测试并对比下根据自己的习惯使用哪一种方式2013-03-03
Webpack打包css后z-index被重新计算的解决方法
这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
在折线图中,通常实线表示实际数据,而虚线用于表示预测数据,这篇文章主要介绍了echarts折线图实现部分虚线部分实线效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了JavaScript树形结构数组处理之递归问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论