cookie ,localStorage 及其他代替方案
2017-10-30 本文已影响0人
小小小白菜呀
cookie 分两种
- 没有设置expires的被称为会话cookie , 保存在内存中, 浏览器窗口关闭即销毁
- 设置了expires的cookie 保存在硬盘中, 可以在不同的浏览器进程中共享
cookie 有这样几个特点
- cookie 主要作用是保存用户信息, 比如存好session id 或者 token 用来和服务器保持登录状态
- 设置httpOnly 保证cookie的安全性, 不被XSS攻击
- cookie 因为每次http请求都会携带, 能精简则精简 总大小不能超过4kb
- cookie 有效期在 sessionUtils工具中设置为两小时 勾选了自动登录则是一周时间
cookie有以下分类 ( 常见cookie )
- cookie_connect
- 94字节 获取接口数据必须的标识 任何链接发起在app.js经过解密发送给后端
- cookie_userip
- 26字节 用户IP, 获取接口数据必须的标识 每次都会重新获取 同时用来记录防刷数据
- cookie_tokenkey
- 79字节 登录令牌 判断是否登录
- cookie_userid
- 18字节 用户ID标识
- cookie_autokey
- 46字节 可能设置为空 是否自动登录
id + token + autokey 共同发送与服务器建立session, 每次登录重设有效期
- debug_signal
- 15字节 调试信号
- cookie_flag
- 如果没有flag, 正常访问页面, 不统计
- cookie_cnt
- 统计30秒内 刷新了几次
各个路由里控制广告浮层的cookie, 均为11字节左右
-
首页
- home_ad_fc 广告浮层 24小时
- showIe7_fc IE7浏览器提示 24小时
-
理财
- bill_fc 活动弹窗浮层
-
挖宝藏
- sundayFc 周一到周日只显示一次
-
娱乐大厅
- play_ad_fc 广告浮层
推广注册页 url : /floor/spread/:id
- cookie_recoms 18字节 推广人的ID 用于注册时发送
还有QQ 登录绑定功能
还有一些其他站点统计用cookie (未统计)
代替cookie 的方法
1. Etag 可以应用于禁用cookie的页面
- 客户端请求一个页面(A)。
- 服务器返回页面A,并在给A加上一个ETag。 // 告诉浏览器要弹窗的截止时间
- 客户端展现该页面,并将页面连同ETag一起缓存。
- 客户再次请求页面A,并将上次请求时服务器返回的ETag一起传递给服务器。 // 把弹窗截止时间发送回来
- 正常情况, 服务器检查该ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304(未修改——Not Modified)和一个空的响应体。
- 在广告浮层业务上, 判断是否达到截止时间, 如果到了截止时间, 就重新设置etag
var extime = new Date().getTime() + 600000; // 新的过期时间, 比如一分钟后
var reqTime = req.headers['if-none-match'] || 0; // 原来的过期时间
reqTime = Number(reqTime);
if (reqTime !== 0 && reqTime > new Date().
res.setHeader('Etag', reqTime); // 还没过期, 就还设置原来的时间
} else {
// 过期了
res.setHeader('Etag', extime);
console.log('设置etag, 过期时间是', extime, new Date(extime).getMinutes(), new Date(extime).getSeconds());
}
2. 不能彻底清除的evercookie
https://www.npmjs.com/package/evercookie
这个插件可以把cookie存在各个地方(大概8个), 简单禁用cookie和清除是不能清除的
3. 每次请求url加一个参数控制广告浮层
4. localStorage 控制广告浮层
- localStorage 仅在浏览器端保存, 不主动参与和服务器的通信, 用来保存登录表示之类的存在安全隐患
- 写一个共用js, 进入一个页面即取出localStorage循环遍历一下对应的key,value
- 如果value已经过期, 那么弹窗
未来应用场景
因为HTTP是无状态的协议
即不能把客户的本次链接与上次链接产生联系,所以我们需要cookie来存储上次链接会话中信息的东西
那么一切有关用户信息的数据, 能增强用户体验的信息, 都有可能存到 cookie 或 localStorage
- 广告浮层相关业务
- 用户的地理位置
- 进入页面后自动跳到上次浏览的位置
- 把最大化的窗口变小时变成用户手动控制过的窗体宽高信息
- 用户上次登录网站的时间