cookie

cookie

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息

cookie的属性

1. name=value: 必须的， 指定了cookie的名字（自定义的）和值（存储的数据）
2. path : 路径， 允许cookie在那个路径下被访问， 默认值 是 path=/;
3. domain : 域， 允许cookie 被那个域访问，
4. expires ：有效期， 限定了cookie的过期时间

cookie的分类

1. 会话cookie: 没有设置expires 属性，则为会话cookie， 随着浏览器窗口的关闭自动销毁
2. 持久cookie: 设置expires 属性，则为持久cookie, 浏览器窗口关闭不会销毁， 直到过期时间到来自动销毁

cookie的用法

1. 创建cookie

	document.cookie = 'name=value'
	document.cookie = 'name=value; path=/login'
	document.cookie = 'name=value; path=/login; domain=.a.com'
	document.cookie = 'name=value; path=/login; domain=.a.com; expires=time'

2. 获取cookie
   获取页面中所有的cookie

	let cookie = document.cookie

3. 删除cookie
   删除cookie 只需要把cookie的过期时间设置为 过去的时间即可; 怎么设置的cookie, 就怎么删除;
   设置cookie的时候添加了那些属性，则删除时需要保持一致，只修改 expires属性 对应的值为过去的时间

// time 是过去某个的时间
	document.cookie = 'name=value; expires=time'

函数封装

1. 设置cookie的函数封装

	function setCookie(cname, value, option){
	    let opts = option || {};
	    //  解析cookie 的属性
	    let path = opts.path || '';
	    let domain = opts.domain || '';
	    let expires = opts.expires || '';
	    
	    //  判断是否传入 expires 处理过期时间
	    if(expires) {
	        var d = new Date();
	        d.setTime( d.getTime() + expires * 24 * 3600 * 1000)
	    }
	
	    //  处理cookie的属性
	    path = path ? '; path=' + path : '';
	    domain = domina ? '; domain=' + domain : '';
	    expires = expires ? '; expires=' + d.toUTCString()
	    //  设置cookie
	    documnet.cookie = cname + '=' + value + path + domain + expires;
	}

2. 获取cookie的函数封装

	function getCookie(cname){
	    let cookie = document.cookie;
	    let cookie_arr = cookie.split('; ')
	    //  处理cookie名字
	    cname = cname + '=';
	    let result;
	    cookie_arr.forEach(item => {
	        if(item.indexOf(cname) !== -1){
	            //  分割存在弊端： 如果cookie中含有 =  则会出错； 使用字符串截取的方式解决该bug
	            //    result = item.split('=')[1]
	            result = item.substring(cname.length)
	        }
	    })
	    return result;
	}

3. 删除cookie的函数封装

	function deleteCookie(cname, value, option){
	    let opts = option || {};
	    //  解析cookie 的属性
	    let path = opts.path || '';
	    let domain = opts.domain || '';
	    let expires = opts.expires || '';
	    
	    //  判断是否传入 expires 处理过期时间  把时间设置为过去的时间
	    if(expires) {
	        var d = new Date();
	        d.setTime( d.getTime() - expires * 24 * 3600 * 1000)
	    }
	
	    //  处理cookie的属性
	    path = path ? '; path=' + path : '';
	    domain = domina ? '; domain=' + domain : '';
	    expires = expires ? '; expires=' + d.toUTCString()
	    //  设置cookie
	    documnet.cookie = cname + '=' + value + path + domain + expires;
	}

面试题: cookie 和 localStorage , sessionStorage 的区别

• 相同点：
  cookie 和 localStorage , sessionStorage 都是存储在客户端的， 不能跨域
• 不同点：

1. 存储数据大小不同： cookie 存储的是 4kb左右，localStorage , sessionStorage 可以到达5M

2. 数据有效期不同 ： cookie 根据expires 过期时间分为 会话cookie 和 持久cookie; localStorage 长久有效， sessionStorage 浏览器窗口关闭销毁

3. 存储方式不同 ：每次发送http 请求都会自动携带cookie ; localStorage , sessionStorage 不会

4. 作用域不同 ： cookie 可以跨子域访问；

5. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下

6. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

7. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

8. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

9. web Storage支持事件通知机制，可以将数据更新的通知发送给监听者

10. web Storage的api接口使用更方便