Js中的cookie

cookie基础

 什么是cookie

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

缓存与cookie的区别

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

Cookie的特性：

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

JS中使用cookie

          Document.cookie

使用cookie

声明cookie

Ø  格式：名字=值

Ø  不会覆盖

<script>
document.cookie="user=blue";
document.cookie="pass=123";
alert(document.cookie);
</script>

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

Ø  给cookie设置过期时间

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

<script>
document.cookie="user=blue" expires=10;
document.cookie="pass=123";
alert(document.cookie);
</script>

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

Ø  封装cookie

<script>
function setCookie(name, value, iDay)
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
setCookie('username','abc',30);
setCookie('username2','123456',30);
alert(document.cookie);
</script>

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

读取cookie

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

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

删除cookie

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

    }

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

cookie的使用

用cookie纪录上一次div的位置

      鼠标抬起——纪录位置

      Window.onload——读取位置

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

     提交时——纪录用户名

      Window.onload——读取用户名