JavaScript工具类（二）：cookie缓存

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地址（记得给星哦）

https://github.com/shiguang0116/sg-utils

系列文章

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用法实例