JavaScript-Cookie

Posted 2020-10-16 万里奔腾

一、什么是Cookie?

　　页面用来存放信息 

　　用户通过浏览器发送请求，会创建Cookie,可以通过JS来读取创建删除Cookie

 

二、 Cookie的特性？

　　数量、大小有限

　　有过期时间

　　同一个网站只能共享同一套Cookie，也就是同一个域名

　　不指定过期时间，到浏览器关闭，就自动清除

 

！！！-JS

　　*********第一个Cookie

　　　　alert(document.cookie);

　　　　注意：alert(document.cookie());这样写是错误的，不能带括号

 

　　*********自定义Cookie

　　　　document.cookie=‘user=2‘;
　　　　document.cookie=‘pwd=3‘;
　　　　alert(document.cookie);

　　　　注意：自定义Cookie是直接用document.cookie=“”来创建的，不用赋值给变量，=就是添加，不会覆盖

 

　  *******设置Cookie过期时间

　　　　var time=new Date();

　　　　time.setDate(time.getDate());

　　　　document.cookie="user=mwl;expires="+time;

　　　　alert(document.cookie);

 

　　******封装Cookie

　　　　设置Cookie

　　　　function setCookie(name, value, iDay)
　　　　{
　　　　　　var oDate=new Date();
　　　　　　oDate.setDate(oDate.getDate()+iDay);
　　　　　　document.cookie=name+‘=‘+value+‘;expires=‘+oDate;
　　　　}

　　　　setCookie(‘mwl‘,‘jiajia‘,15);

　　读取Cookie

　　　　function getCookie(name)
　　　　{
　　　　　　var arr=document.cookie.split(‘; ‘);
　　　　　　for(var i=0;i<arr.length;i++)
　　　　　　{
　　　　　　　　　var arr2=arr[i].split(‘=‘);
　　　　　　　　　if(arr2[0]==name)
　　　　　　　　　{
　　　　　　　　 　　return arr2[1];
　　　　　　　　  }　　
　　　　　　}
　　　　　　return ‘‘;
　　　　}

　　　　alert(getCookie(‘sex‘))

　　删除Cooie

　　　　function removeCookie(name)
　　　　{
　　　　　　setCookie(name, 1, -1);
　　　　}

　　　　removeCookie(‘password‘);

 

！！！实例

　　　---html

　　　　<form id="form1" action="http://www.zhinengshe.com/">
　　　　　　用户名：<input type="text" name="user" /><br>
　　　　　　密码：<input type="password" name="pass" /><br>
　　　　　　<input type="submit" value="登陆" />
　　　　</form>　

　　　　！！！-JS　

　　　　function setCookie(name, value, iDay)
　　　　{
　　　　　　var oDate=new Date();
　　　　　　oDate.setDate(oDate.getDate()+iDay);
　　　　　　document.cookie=name+‘=‘+value+‘;expires=‘+oDate;
　　　　}

　　　　function getCookie(name)
　　　　{
　　　　　　var arr=document.cookie.split(‘; ‘);
　　　　　　for(var i=0;i<arr.length;i++)
　　　　　　{
　　　　　　　　var arr2=arr[i].split(‘=‘);
　　　　　　　　if(arr2[0]==name)
　　　　　　　　{
　　　　　　　　　　return arr2[1];
　　　　　　　　}
　　　　　　}
　　　　　　return ‘‘;
　　　　}

　　　　function removeCookie(name)
　　　　{
　　　　　　setCookie(name, 1, -1);
　　　　}

　　　　window.onload=function ()
　　　　{
　　　　　　var oForm=document.getElementById(‘form1‘);
　　　　　　var oUser=document.getElementsByName(‘user‘)[0];　
　　　　　　oForm.onsubmit=function ()
　　　　　　{
　　　　　　　　setCookie(‘user‘, oUser.value, 14);
　　　　　　};
　　　　　　oUser.value=getCookie(‘user‘);
　　　　};