JS——Cookie

Posted 2021-12-28 ytraister

使用Cookie

1》什么是Cookie

解释：在页面中用来保存信息的（例如：自动登录、记住用户名）

特性：1）同一个网站中所有页面共享一套cookie；

　　　2）数量、大小有限；

　　　3）具有过期时间；

在js中使用cookie：即：document.cookie

注意：若要在浏览器本地查看cookie的值，需要使用ff浏览器；而其他浏览器查看cookie的话，需要搭载服务器才能。

 

2》cookie的使用

1）设置cookie

　　a、格式：名字=值　　（例如：‘user=George’）

　　b、document.cookie设置值时，不会覆盖原有的值　　（即：user=George; pass=123 两个值不会覆盖）

　　c、可以设置它的过期时间　　（用“expires=时间”的方法，需要用日期对象来配合使用）

 

<script>
　　var oDate=new Date();
　　oDate.setDate(oDate.getDate()+30);   //设置日期时间为当前时间的30天后
        
　　document.cookie=‘user=George;expires=‘+oDate;    //js中用来设置cookie的值，其中expires表示设置的时长
　　document.cookie=‘pass=123‘;

　　alert(document.cookie)   //输出cookie的值　　即；user=George; pass=123;
</script>

 

解释：在ff浏览器中即可输出cookie的值，其中user=George的值设置为30天的保存日期。当关闭浏览器后，所设置的cookie值中只剩下user=George，因为它的过期时间还没到（30天时间），而pass=123的值会消失

　　d、封装以上代码，得出新的函数：

 1 <script>
 2 　　//封装设置cookie函数
 3 　　function setCookie(name,value,iDay)
 4 　　　　var oDate=new Date();
 5 　　　　oDate.setDate(oDate.getDate()+iDay);
 6             
 7 　　　　document.cookie=name+‘=‘+value+‘;expires=‘+oDate;
 8 　　
 9 　　setCookie(‘George‘,‘123‘,30);
10 　　setCookie(‘Rose‘,‘456‘,30);
11         
12 　　alert(document.cookie);          //设置完cookie的值，输出为：George=123; Rose=456
13 </script>

解释：

第3行代码：传入三个参数（name、value、iDay），分别表示：名字、值、时间；

第4-5行代码：用日期对象来配合使用设置它的过期时间；

第7行代码：设置cookie的值（并使用过期时间方法）

 

2）读取cookie

　　a.用字符串分割的方法（split）

 1 <script>
 2 　　//封装获取cookie函数
 3 　　function getCookie(name)                 //传入一个name参数
 4 　　　　var arr=document.cookie.split(‘;‘);　　//结合上面的设置cookie方法，用数组split方法，拆分字符串，结果为：George=123, Rose=456
 5 　　　　　　　　//alert(arr);
 6 　　　　for(var i=0;i<arr.length;i++)
 7 　　　　　　var arr1=arr[i].split(‘=‘);
 8 　　　　　　　　//alert(arr1)                   //用数组split方法，拆分字符串，结果为：George,123, Rose,456
 9 　　　　　　if(arr1[0]==name)                 //用于判断所获取的cookie值是否与name的值相同
10 　　　　　　　　return arr1[1];                 //与name值相同，则返回arr1[1]的值
11 　　　　　　
12 　　　　
13 　　　　return ‘‘;                             //与name值不同，则返回空值
14 　　
15 　　alert(getCookie(‘George‘));               //输出：123
16 </script>

解释：

 

3）删除cookie

　　a.改变过期时间（把iDay的值设置为-1，让它显示昨天过期）

1 <script>
2 　　//封装删除cookie函数
3 　　function removeCookie(name)
4 　　　　setCookie(name,‘1‘,-1);                 //调用setCookie函数，把setCookie中的oDate设为-1，让它昨天过期，即达到删除cookie的目的
5 　　
6 　　alert(getCookie(‘George‘));                 //删除前，输出：123
7 　　removeCookie(‘George‘);
8 　　alert(getCookie(‘George‘));                 //删除后，输出：  （空值）
9 </script>

 

其他详细了解可以参考菜鸟教程：https://www.runoob.com/js/js-cookies.html