使用Cookie以及遇到的问题

首先分享一下我自己封装的设置cookie，获取cookie以及删除cookie的三个函数：

1.获取cookie

function getCookie(name) {
    //获取到cookie
    var cookies = document.cookie;
    // 给name拼接上=
    name += "=";
    var arr = cookies.split("; ");
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].indexOf(name) === 0) {
            // 找到符合name的cookie
            return arr[i].substr(name.length);
        }
    }
    return "";
}

2.设置cookie

function setCookie(name, value, opt) {
    opt = opt || {}
    var path = opt.path || "";
    path = path ? ";path=" + path : ""
    var domain = opt.domain || "";
    domain = domain ? ";domain=" + domain : "";
    var expires = opt.expires || "";
    if (expires) {
        var d = new Date(Date.now() + expires * 24 * 60 * 60 * 1000).toUTCString();
        expires = ";expires=" + d
    }
    document.cookie = name + "=" + value + path + domain + expires

}

3.删除cookie，其实就是设置一个过期时间

function removeCookie(name, opt) {
            opt = opt || {}
            var path = opt.path || "";
            path = path ? ";path=" + path : ""
            var domain = opt.domain || "";
            domain = domain ? ";domain=" + domain : "";
            var expires = ";expires=" + new Date(1).toUTCString()
            document.cookie = name + "=" + path + domain + expires
        }

但是在使用cookie的时候我发现手动设置甚至调用函数设置根本没用，研究了半天，原来cookie是基于服务器环境运行的。
只有网址是localhost:8080/index时才可以设置cookie，而我写的是file:///H:/index，因此会失效。

调用函数举例代码：

 setCookie("a","1",{
            path:"/",
            domain:"localhost",
            expires:"2"
         })

下面再推荐一个基于jquery的一个cookie的处理插件----jQuery.cookie.js

网址：http://www.jq22.com/jquery-info254
使用方法:
引入

<script type="text/javascript" src="自己的jquery的地址"></script> 
<script type="text/javascript" src="jquery.cookie.js的地址"></script>

//jqeury.cookie.js
    //添加： 
    
        $.cookie('the_cookie', 'the_value');
        //添加一个cookie并设置7天的有效期
        $.cookie('the_cookie', 'the_value', { expires: 7 });

   // 读取：
        $.cookie('the_cookie')

    //删除：
        $.removeCookie("the_cookie");

        $.cookie('the_cookie', null);

cookie和storage的区别有以下几点：

共同点：都是保存在浏览器端，且同源的。
区别：

1. 与服务器的数据交换方式不同。 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4. 作用域不同，sessionStorage、localStorage不在不同的浏览器窗口中共享，即使是同一个页面；cookie也是在所有同源窗口中都是共享的。