cookie

Posted 2020-09-15 super_素素

• cookie的诞生

• /*
  http协议是无状态的
  但是我们有记录状态的需求，所以为了解决这个问题，就诞生了cookie

  cookie的作用：维护客户端与服务器之间的状态
  cookie的缺点：1、有安全隐患；2、cookie存储的数据量有限（4k）

  在网络请求的过程中所有的cookie都是带着的，（以请求头的方式发送给服务器）

  cookie是与域名绑定的，不能从一个域名下去获取另外一个域名下面的cookie
  在父级路径设置cookie，在子路径中是可以访问的，但是反过来不行*/

• 操作

• 原生js如何操作cookie？
  获取cookie的方式：document.cookie 这种方式获取的是所有的cookie
  cookie的存储格式：cookie由键值对组成（key=value）多个cookie之间使用分号和空格隔开
  （username=lisi; age=12）
  设置cookie的方式：document.cookie=\'username=lisi\'

• // 设置会话cookie（关闭浏览器就消失了）
  // $.cookie(\'name\', \'value\');
  // $.cookie(\'name\', \'value\',{
  // expires : 7,
  // path : \'/\'
  // });
  // 设置cookie
  // $.cookie(\'age\', \'12\');
  // 获取单个cookie
  // console.log($.cookie(\'age\'));
  // 获取所有cookie（格式是对象形式）
  // console.log($.cookie().age);
  // ------------------------------------
  // 删除cookie
  // $.removeCookie(\'age\');

•  

  cookie的分类：
  1、会话cookie，这种cookie只存储在内存，不会存储到文件中，浏览器关闭之后就会消失
  2、持久cookie，这种cookie会存储在文件中，浏览器关闭之后不会消失

  */
  document.cookie = \'username=lisi\';
  document.cookie = \'age=12\';

  var date = new Date();
  // 7天以后
  date.setDate(date.getDate() + 7);

  // document.cookie = \'username=lisi; expires=\' + date.toGMTString() + \'; path=/\';
  // document.cookie = \'age=12; expires=\' + date.toGMTString();

  // console.log(document.cookie);
  // var str = document.cookie;
  // console.log(typeof str);

 

1. 原生js实现获取指定的cookie值

document.cookie=\'username=xiaobai\';
document.cookie=\'age=18\';

      

var date=new Date();
date.setDate(date.getDate()+7);//当前时间的7天后

document.cookie="username=xiaobai; expires="+date.toGMTString()+"; path=/";
document.cookie="age=12; expires="+date.toGMTString()+"; path=/";
//实现一个方法,获取指定的cookie值
function getcookie(key){
var cookies=document.cookie;//"username=xiaobai; age=12"
var ck=cookies.split("; ");//把字符串转成数组
console.log(ck)//["username=xiaobai", "age=12"]
if(ck){
for(var i=0;i<ck.length;i++){
var kv=ck[i].split("=");//把数组里的每一个元素取出来=去掉变成有两个元素的每一个数组；
//console.log(kv)//["username", "xiaobai"] ["age", "12"]
if(kv[0]==key){
return kv[1];
}
}
}
};
console.log(getcookie("age"));

//实现一个方法，设置cookie的值
function setcookie(key,value,param){
document.cookie=key+"="+value+"; expires"+"="+param.expires+"; path"+"="+param.path;
}
setcookie("sex","gril",{
expires:date.toGMTString(),
path:"/"
})