Cookie的作用以及封装的方法

Cookie相当于本地储存(local Storage),也是一种储存信息的方式。

它通过

document.cookie ='name=value' //name  name值  value value值  

将name value 存入到

以上是我通过

document.cookie = 'weiboMsg=98567; path=/; expires=10';

写入到Cookie中。意思是  Name是 weiboMsg  Value是 98567 。

然后呢，我们也可以获取Cookie,通过

alert(document.cookie)； //weiboMsg=98567
alert(typeof document.cookie); //string

但是我们会发现父级文件夹中无法调取子文件夹中的Cookie的值。

还有当我们关闭当前页面再次打开时，也无法读取Cookie的值。

在这里就会涉及到   path 路径  和  expires 时效

也就是以上两项，你可以ctrl+shift+j再找到

就可以随时观察Cookie的变化，以及它的默认值

比如 expires 中的 Session  ，它的时效是当前会话，也就是这个页面打开时。

这是我们就可以写两个方法来控制Cookie的传入与去除

在这里我们定义两个方法，分别是：setCookie() 与 getCookie();

代码如下

function setCookie(name, value, iDay) {
    if(iDay) {
        var dat = new Date();

        dat.setDate(dat.getDate()+iDay);
        
        //name   传入的名称     value   传入的  值      path  默认路径（/）无需传入    expires  修改过期时间
        document.cookie = '' + name + '=' + value + '; path=/; expires=' + dat + '';
    } else {
        document.cookie = '' + name + '=' + value + '; path=/';
    }
}

function getCookie(name) {
    //因为取来的Cookie信息是string，所以我们要将其拆分
    var sValue = document.cookie.split('; ');
        //["name=value", "name1=value"];
    for(var i = 0; i < sValue.length; i++) {

        var arr1 = sValue[i].split('=');
        //分割为  ["name", "value"]，["name1", "value"]
        console.log(arr1);
        if(arr1[0] == name) {
            return arr1[1];
        }
    }
    return '';
}

通过对字符串与数组的操作，获取Cookie中name的值。这里应注意以下在第一次split分割时的字符是 ;+空格

另外，我们也可以设置删除Cookie，我将其命名为delCookie

function delCookie(name) {
    setCookie(name, 'ssss', -10)
}

原理就是将时效设为负值，浏览器就会将Cookie种的信息删除