cookie
定义:cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)。
-
cookie 数据始终在同源的 http 请求中携带(即使不需要),即会在浏览器和服务器间来回传递。
-
每次请求一个新的页面的时候 cookie 都会被发送过去。
一、cookie 隔离
如果静态文件都放在主域名下,那静态文件请求的时候都是带有 cookie 的数据提交给 server 的,这样非常浪费流量,不如隔离开。怎么隔离:
- cookie 有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。
- 同时这种方式不会将cookie传入Web Server,也减少了Web Server对cookie的处理分析环节,提高了webserver的http请求的解析速度。
二、cookie 和 storage 的区别
1、存储方式
cookie:需要与服务器进行交互。
storage:不会自动把数据发给服务器,仅在本地保存。
2、存储大小
cookie:数据大小不能超过4k。
storage:数据可以达到5M或更大(浏览器差异)。
3、有效期
cookie:设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
sessionStorage :数据在当前浏览器窗口关闭后自动删除。
localStorage :可以永久存储,浏览器关闭后数据不丢失除非主动删除数据。
4、方法
cookie:需要前端开发者自己封装方法。
storage:拥有 setItem | getItem | removeItem | clear 等方法。
三、cookie 缓存方法封装
u.cookie = {}
设置缓存
/**
* @description 设置缓存
* @param {String} name 缓存数据的名字
* @param {*} value 缓存数据的值
* @param {Number} expiredays 缓存数据的时间(天),默认关闭浏览器时失效。1/24 表示一个小时,1/24/60 表示一分钟
*/
u.cookie.set = function(name, value, expiredays) {
var expires = ''
if (expiredays) {
var exdate = new Date()
exdate.setTime(exdate.getTime() + expiredays * (24 * 3600 * 1000))
expires = ';expires=' + exdate.toUTCString()
}
document.cookie = name + '=' + escape(value) + expires
}
获取缓存
/**
* @description 获取缓存的数据
* @param {String} name 要获取的数据对应的名字
* @return {*}
*/
u.cookie.get = function(name) {
var arr = document.cookie.split('; ')
for (var i = 0; i < arr.length; i++) {
var temp = arr[i].split('=')
if (temp[0] === name) return unescape(temp[1])
}
return null
}
删除缓存
/**
* @description 删除缓存中某些数据
* @param {String} name 要删除的数据对应的名字
*/
u.cookie.remove = function(name) {
u.cookie.set(name, '', -1)
}
下载
npm i sg-utils -S
GitHub地址(记得给星哦)
系列文章
JavaScript工具类(一):util.js创建及上传
JavaScript工具类(二):cookie缓存
JavaScript工具类(三):localStorage本地储存
JavaScript工具类(四):数据类型
JavaScript工具类(五):string字符串
JavaScript工具类(六):number数字
JavaScript工具类(七):array数组
JavaScript工具类(八):object对象
JavaScript工具类(九):date日期
JavaScript工具类(十):base64编码、解码
JavaScript工具类(十一):浏览器、移动端类型
JavaScript工具类(十二):validate表单验证
JavaScript工具类(十三):url路径处理
JavaScript工具类(十四):json数据格式
JavaScript工具类:util.js用法实例