Js中的cookie

cookie基础

什么是cookie

页面用来保存信息：比如登录、记住用户名、字符串

缓存与cookie的区别

缓存是靠客户端的设置来存储的，cookie是靠JS来存储的

Cookie的特性：

同一个网站中所有的页面共享一个cookie
数量、大小有限，一般大概就是几十个，大小以K为单位
具有过期事件

JS中使用cookie

Document.cookie

使用cookie

声明cookie

Ø 格式：名字=值

Ø 不会覆盖

1 <script>
2 document.cookie="user=blue";
3 document.cookie="pass=123";
4 alert(document.cookie);
5 </script>

这里的cookie是可以重复赋值的，也就是可以赋值两次，区别于一般的变量，弹出来的时候显示的是赋值的两个值

Ø 给cookie设置过期时间

过期时间：expires=时间》日期对象的使用

1 <script>
2 document.cookie="user=blue" expires=10;
3 document.cookie="pass=123";
4 alert(document.cookie);
5 </script>

添加的过期时间为10天后，这里以天为单位，运用expires=时间来设定过期的时间

Ø 封装cookie

1 <script>
2 function setCookie(name, value, iDay)
3 var oDate=new Date();
4 oDate.setDate(oDate.getDate()+iDay);
5 document.cookie=name+'='+value+';expires='+oDate;
6 setCookie('username','abc',30);
7 setCookie('username2','123456',30);
8 alert(document.cookie);
9 </script>

使用的是运用get封装，这里面有三个值 name value iday名字，密码和过期时间iDay

读取cookie

读取cookie, 主要运用字符串分割的原理，把cookie的三个元素分割出来

 1 function getCookie(name)
 2 {
 3     var arr=documennt.cookie.split('; ');
 4     var i=0;
 5     for(i=0;i<arr.length;i+=)
 6     {
 7         var arr2=arr[i].split('=');
 8         if(arr2[0]==name)
 9         {
10             return arr2[1];
11             }
12         }
13         return ' ';
14     }

删除cookie

1 function removeCookie(name)
2 {
3     setCookie(name,'1',-1);
4 
5     }

删除cookie的原理就是把它的日期设置为已经过期了的，这样就自动删除了，这里把它的过期日期设置为昨天，就相当于把它删除了。

cookie的使用

用cookie纪录上一次div的位置

鼠标抬起——纪录位置

Window.onload——读取位置

使用cookie纪录上一次登录时的用户名

提交时——纪录用户名

Window.onload——读取用户名