详细内容
1.什么是cookie Cookie(会话跟踪技术):在一次会话从开始到结束的整个过程,全程跟踪记录客户端状态(例如:是否登录、购物车信息、是否已经下载、是否已经点赞、视频播放进度等等)
形象比喻:第一次跟服务器连接后,服务器发给你一张身份卡片(cookie),上面记录跟你有关的信息,以后还跟服务器连接的时候必须带着这个身份卡片,这样服务器就可以读到身份卡片上的信息作出页面的调整。
3.cookie的特点 cookie
可以设置过期时间
最大存储4kb
一个域名最多50条cookie(不同浏览器有区别)
只能存储字符串。一般存储重要信息
localstorage
不主动删除永久保存
最大5m
3.cookie语法 格式:name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]
设置cookie:document.cookie='username=xxx';
获取cookie:alert(document.cookie);
注 :火狐支持本地加载文件缓存cookie,谷歌只支持服务器加载文件缓存cookie
3.1 编码与解码 解决存储中文乱码的问题,将中文编码存储,读取时解码读取。
document.cookie=’user=’+encodeURIComponent(‘钢铁侠’); //编码写入
alert(decodeURIComponent(document.cookie)); //解码读取
3.2 过期日期expires expires:过期时间
必须填写日期对象
默认值为会话,整个浏览器关闭为会话结束
获取n天后的日期
1 2 3 4 5 6 7 8 function afterOfDate (n ) { var d=new Date (); var day=d.getDate(); d.setDate(n+day); return d } document .cookie="username=xxx;expires=" +afterOfDate(7 );
3.3 删除cookie
cookie同名添加覆盖上一次
浏览器自动删除过期cookie
1 2 3 4 5 6 7 document .cookie="username=;expires=" +afterOfDate(-1 );new Date (0 );document .cookie="username=;expires=" +new Date (0 );
3.4 cookie可选项 格式:name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]
path 限制访问路径
domain 限制访问域名
如果不去设置,默认是加载当前.html文件的服务器域名/ip
设置cookie域名和加载当前文件的域名不一致,设置cookie失败
secure 安全
如果不设置,设置cookie,可以通过http或者https协议加载文件设置
设置了,只能通过https协议加载cookie
4.封装cookie 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 function $cookie (name ) { switch (arguments .length){ case 1 : return getCookie(name); break ; case 2 : if (arguments [1 ]==null ){ removeCookie(name); }else { setCookie(name,arguments [1 ],{}) } break ; case 3 : setCookie(name,arguments [1 ],arguments [2 ]) break ; default : alert("error" ); break ; } } function setCookie (name, value, { expires, path, domain, secure } ) { var cookieStr = encodeURIComponent (name) + "=" + encodeURIComponent (value); if (expires) { cookieStr += ";expires=" + afterOfDate(expires); } if (path) { cookieStr += ";path=" + path; } if (domain) { cookieStr += ";domain=" + domain; } if (secure) { cookieStr += ";secure" ; } document .cookie = cookieStr; } function afterOfDate (n ) { var d = new Date (); var day = d.getDate(); d.setDate(n + day); return d } function getCookie (name ) { var cookieStr = decodeURIComponent (document .cookie); var start = cookieStr.indexOf(name + "=" ); if (start == -1 ) { return null ; } else { var end = cookieStr.indexOf(";" , start); if (end == -1 ) { end = cookieStr.length; } var str = cookieStr.substring(start, end); var arr = str.split("=" ); return arr[1 ]; } } function removeCookie (name ) { document .cookie = encodeURIComponent (name) + "=;expires=" + new Date (0 ); }