前言
之前学的是本地存储,然后了解到还有cookie这种存储方法,经过了解,这种方法对后面的学习有很大作用,希望大家能跟我一起开肝,羌胡!!
补充一点的就是,ccokie的操作分为服务器端和客户端,这里我没有自己的服务器,所以只讲客户端的!!
正题
简介
cookie是由服务器发送给客户端(浏览器)的小量信息。平时上网时都是使用无状态的HTTP协议传输出数据,这意味着客户端与服务端在数据传送完成后就会中断连接。这时我们就需要一个一直保持会话连接的机制。在session出现前,cookie就完全充当了这种角色。也就是说cookie的小量信息能帮助我们跟踪会话。一般该信息记录用户身份,当然cookie也常记录跟踪购物车的商品信息(如数量)、记录用户访问次数等。
处理
服务器向客户端发送cookie
浏览器将cookie保存
之后每次http请求浏览器都会将cookie发送给服务器端
cookie的操作(在js里面操作)
写入
- 第一种方法是原生赋值方法:
注意:
document.cookie=’'赋值时,用;分号间隔,只用于添加属性。
document.cookie=‘name=1;age=2’ 这种写法只有name=1可以生效。因为一次只能赋值一个name和value,若多个也只取第一个。
document.cookie = "age=1; domain=sankuai.com; path=/";
/*里面age=1是内容,后面跟的是属性,如果要设置多个内容则按下面格式来*/
document.cookie = "name=qwq;"
document.cookie = "address=shantou;"
- 为了更加方便使用我们就会直接封装成一个函数–setCookie()
这里如果不给时间的话,浏览器一关就没了
function setCookie (name, val, exday) {
let d = new Date()
let expires = ''
if (exday) {
d.setTime(d.getTime() + (exday * 24 * 60 * 60 * 1000))
expires = '; expires=' + d.toGMTString()
}
document.cookie = name + '=' + val + expires
}
/*这里面name是键,val是值,exday是存在时间可不填*/
获取
- 原生获取方法:document.cookie
注意这个获取是全部
document.cookie="name=wang";
document.cookie="age=20"
setCookie('text','123');
console.log(document.cookie);
2. 同理封装一个获取函数(为了获取特定的值)–geiCookie()
function getCookie (name) {
let data = '';
if (document.cookie) {
let arr = document.cookie.split(';');
for (let str of arr) {
let temp = str.split('=');
if (temp[0].replace(/(^\s*)/g, '') === name) {
data = unescape(temp[1]);
break;
}
}
} else {
console.warn('cookie不存在');
}
return data;
}
移除–clearCookie
首先我们知道cookie是可以设置时间的,只要我们其有效期变成当前时间之前就可以达到清除的效果!!
function clearCookie (name) {
let temp = new Date()
temp.setTime(temp.getTime() - 1)
let val = getCookie(name)
if (val != null) document.cookie = name + '=' + val + ';expires=' + temp.toGMTString()
}
cookie的一些特殊点
- 如果浏览器使用的是cookie,那么所有的数据都保存在浏览器端,
- cookie可以被用户禁止
- cookie不安全(对于敏感数据,需要加密)
- cookie只能保存少量的数据(大约是4k)
- cookie只能保存字符串
- 正因为保存得少,对服务器的负担就没有那么重
与sesson的联系
cookie 可以让服务端程序跟踪每个客户端的访问,但是每次客户端的访问都必须传回这些Cookie,如果 Cookie 很多,这无形地增加了客户端与服务端的数据传输量!!!
而 Session 也就应运而生。同一个客户端每次和服务端交互时,不需要每次都传回所有的 Cookie 值,而是只要传回一个 ID,这个 ID 是客户端第一次访问服务器的时候生成的, 而且每个客户端是唯一的。这样每个客户端就有了一个唯一的 ID,客户端只要传回这个 ID 就行了,这个 ID 通常是 NANE 为JSESIONID 的一个 Cookie。
与sesson的区别
1.具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。同时我们也看到, 由于采用服务器端保持状态的方案在客户端也需要保存一个标识,所以session机制可能需要借助于cookie机制来达到保存标识的目的
2.cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session
3.session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie
4.单个cookie保存的数据不能超过4k,很多浏览器都限制一个站点最多保存20个cookie,可以将登陆信息等重要信息存放为session。