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,则要进行转换
```javascript
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的函数(记忆,面试可能会问到)
```javascript
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"));