cookie 会话跟踪技术
一个网站从打开到浏览（包括这个网站的其他子页面）到最后关闭浏览器整个过程叫一个“会话”。 在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）。
多次请求页面，数据共享
cookie的存取
document.cookie = "username=zhangsan"; //存 cookie
console.log(document.cookie); // 取 cookie
cookie的修改与删除
修改：再次写一个同名cookie，即可覆盖修改了 删除：将expires值比如取为-1，时效写为以前的日期
// 存cookie
function setCookie() {
tools.cookie("user", "张三", {path: "/"});
}
// 取cookie
function getCookie () {
var user = tools.cookie("user");
console.log(user);
}
// 删除cookie
function deleteCookie () {
// 把cookie的过期时间设置为以前的日期
tools.cookie("user", "", {expires: -1, path: "/"});
}
而使用cookie技术的目的就是：解决HTTP无状态的问题
- 注意：cookie是http/https协议下的技术，不支持本地file文件对cookie操作（但是貌似火狐浏览器是个例外）
- HTTP（无状态的协议）,基于TCP协议的一种高级协议, 用于客户端和服务器直接的通信
cookie的时效： expires
var d = new Date();
d.setDate(d.getDate() + 2); //例如设置到过期的日期为2天后
document.cookie = "username=zhangsan;expires="+d;
cookie的路径：path
document.cookie = "name=zhangsan;path=/"; //将存的cookie设置存储在/根路径下，确保该网站下的每个页面都可以取这个cookie
}
cookie的特点
1.只能使用文本，不能中文，不能存对象 2 单条存储有大小限制 4KB 3 数量限制(一般浏览器，限制大概在50条左右) 4 读取有域名限制 不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取。 5 时效限制 每个cookie都有时效，最短的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁
encodeURIComponent和decodeURIComponent方法
- 因为cookie的特点不能使用中文，所以存的时候若有中文要重新编码
-
encodeURIComponent用于编码,可将中文转化为其他字符，例如encodeURIComponent('张三')，结果为"%E5%BC%A0%E4%B8%89"
-
decodeURIComponent反之用于解码 decodeURIComponent("%E5%BC%A0%E4%B8%89"); // 张三
var username = "张三";
username = encodeURIComponent(username);
document.cookie = "username="+username;
console.log(document.cookie);
若非要存取一个对象类型的cookie
- 前面说了，cookie的特点为只能存取文本，若非要存取一个对象类型的cookie，则要进行转换
var obj = {
"name":"zhangsan",
"age": 18
};
// 存cookie
tools.cookie("cart", JSON.stringify(obj), {"path": "/", "expires": 5});
// 取cookie
var obj2 = JSON.parse(tools.cookie("cart"));
console.log(obj2);
封装一个存取cookie的函数（记忆，面试可能会问到）
var tools = {
/* cookie的操作（存取）
* @param key string 存取的key值
* @param [value] string 如果传入value，那么就是 存cookie; 不传就是 取cookie; 就可以根据是否有value值来判断是存 或者 取 cookie，然后进行相应的操作
* @paran [option] object {expires, path}
* @return string 取cookie的时候返回的当前cookie的值
*/
cookie : function (key, value, option) {
if(value === undefined){
// 1.取cookie
var cookie = document.cookie;
var arr = cookie.split("; "); // 因为cookie格式为key和value中间以=连接
var obj = {};
arr.forEach(function(ele){
var subarr = ele.split("=");
obj[subarr[0]] = decodeURIComponent(subarr[1]);
})
// 判断obj对象里面有没有这个key
return obj[key] ? obj[key] : "";
}
else{
//2.存cookie
var str = key+"="+encodeURIComponent(value);
if(option){
// path
if(option.path){
str += ";path="+option.path;
}
// expires
if(option.expires) {
var date = new Date();
// 把过期日期设置为option.expires天之后
date.setDate(date.getDate() + option.expires);
str += ";expires=" + date;
}
}
document.cookie = str;
}
}
}
// 以后就可以引用这个写好的方法
// 例如：
//存cookie
// tools.cookie("name", "张三", {"path": "/", "expires": 5});
//取cookie
// console.log(tools.cookie("name"));
