美文网首页
cookie ,localStorage 及其他代替方案

cookie ,localStorage 及其他代替方案

作者: 小小小白菜呀 | 来源:发表于2017-10-30 17:18 被阅读0次

    cookie 分两种

    1. 没有设置expires的被称为会话cookie , 保存在内存中, 浏览器窗口关闭即销毁
    2. 设置了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的页面

    1. 客户端请求一个页面(A)。
    2. 服务器返回页面A,并在给A加上一个ETag。 // 告诉浏览器要弹窗的截止时间
    3. 客户端展现该页面,并将页面连同ETag一起缓存。
    4. 客户再次请求页面A,并将上次请求时服务器返回的ETag一起传递给服务器。 // 把弹窗截止时间发送回来
    5. 正常情况, 服务器检查该ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304(未修改——Not Modified)和一个空的响应体。
    6. 在广告浮层业务上, 判断是否达到截止时间, 如果到了截止时间, 就重新设置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 控制广告浮层

    1. localStorage 仅在浏览器端保存, 不主动参与和服务器的通信, 用来保存登录表示之类的存在安全隐患
    2. 写一个共用js, 进入一个页面即取出localStorage循环遍历一下对应的key,value
    3. 如果value已经过期, 那么弹窗

    未来应用场景

    因为HTTP是无状态的协议

    即不能把客户的本次链接与上次链接产生联系,所以我们需要cookie来存储上次链接会话中信息的东西

    那么一切有关用户信息的数据, 能增强用户体验的信息, 都有可能存到 cookie 或 localStorage

    • 广告浮层相关业务
    • 用户的地理位置
    • 进入页面后自动跳到上次浏览的位置
    • 把最大化的窗口变小时变成用户手动控制过的窗体宽高信息
    • 用户上次登录网站的时间

    相关文章

      网友评论

          本文标题:cookie ,localStorage 及其他代替方案

          本文链接:https://www.haomeiwen.com/subject/xsiypxtx.html