Cookie

什么是cookie

cookie:会话跟踪技术 客户端 session:会话跟踪技术 服务端

在网页中怎么查看cookie里面的数据情况?

1.可以在编辑器中输入document.cookie,然后打印或输出即可

2.Chrome浏览器中F12打开,开发者工具 —— Application面板中查找cookie即可

cookie作用:

将网页中的数据保存到浏览器中

cookie生命周期:

默认情况下cookie生命周期是一次会话(浏览器被关闭) 可以通过expires来设置cookie的生命周期

  1. 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
  2. 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在

以下代码块示例怎么修改cookie的过期时间并设置到当天的时间

var date = new Date();
date.setDate(curTime.getDate()+1) //这里可以加一就是明天,也可以减一就是昨天也就看不到此数据,两者只能选其一
document.cookie = "name=xuyuxin;expires="+date.toGMTString()+";";
alert(document.cookie);

cookie其他注意点:

  1. cookie默认不会保存任何数据
  2. cookie不能一次性保存多条数据
  3. cookie保存数据有大小和个数限制个数限制:20~60总大小不能超过4KB左右

cookie作用范围:

  1. 同一个浏览器同一个路径下访问
  2. 如果在同一个浏览器中,默认情况下,下一级路径也能访问
  3. 如果在同一个浏览器中,想让上一级目录也能访问到保存的cookie数据,那么需要添加一个path属性即可(如下)
document.cookie = "name=xuyuxin;path=/;"

           例如:
            保存到了www.it666.com/jQuery/Ajax/路径下,
            我们想在 www.it666.com/jQuery/Ajax/13-weibo/,
            和 www.it666.com/jQuery/ 路径下也能访问

            例如:
            我们在www.it666.com下面保存了一个cookie,
            那么我们在edu.it666.com中是无法访问的
            如果想在edu.it666.com中也能访问, 那么我们需要再添加一个domain属性才可以;
            document.cookie = "name=zs;path=/;domain=it666.com;";
            */

cookie封装

/**
 * @param {*} option.key 
 * @param {*} option.value 
 * @param {*} option.path 
 * @param {*} option.domain 
 * @param {*} option.beOverDueTime 
 * @method 添加一条cookie数据
 */
function addCookie(option) {
    //路径
  var index = window.location.pathname.lastIndexOf("/"),
    curPath = window.location.pathname.slice(0, index);
  option.path = option.path || curPath;

    //域名作用域
    option.domain = option.domain || document.domain;
    //过期时间
    if(!option.beOverDueTime){
        //没传则直接创建cookie
        document.cookie = option.key+"="+option.value+";path="+option.path+";domain="+option.domain+";";
    }else{
    //创建cookie
        var date = new Date();
        date.setDate(date.getDate()+option.beOverDueTime);
        document.cookie = option.key+"="+option.value+";path="+option.path+";domain="+option.domain+";expires="+date.toGMTString()+";";
    }
}
/**
 * @param {*} key 
 * @method 获取指定的cookie数据
 */
function getCookie(key){
    for(var i = 0 ; i<document.cookie.split(";").length;i++){
        if(document.cookie.split(";")[i].split("=")[0].trim()===key){
            return document.cookie.split(";")[i].split("=")[1].trim();
        }
    }
}
/**
 * @param {*} key 
 * @param {*} path 
 * @method 删除指定的cookie数据,注意点:默认只能删除默认路径的cookie数据,想删除别的路径的cookie,必须在调用函数前传入指定的路径即可删除
 */
function delCookie(key,path){
    addCookie({
        key:key,
        value:getCookie(key),
        path:path,
        beOverDueTime: -1
    })
}

hash

hash能实现和cookie一样的功能,各有各的好处,hash使用起来被cookie方便许多

添加一条hash数据

window.location.hash = 要添加的数据;

获取hash数据

//在js中没有专门获取hash数据的函数,因此只能自寻方法这里用substring()函数截取
console.log(window.location.hash.substring(1))  //从索引为1的字符串开始截取

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • IndexedDB

    IndexedDB 是一个比较复杂的 API,涉及不少概念。它把不同的实体,抽象成一个个对象接口。学习这个 API,就是学习它的各种对象接口。

    jinghong
  • HTML5

    JS 里拖拽三事件, onmousedown onmousemove onmouseup 是实现交互性效果,根据鼠标的移动位置让标签元素联动

    jinghong
  • Docker入门

    docker 在线测试网站: play With Docker,这是一个可以用来在线练习 docker 指令的网站,具备一切 docker 环境,不用为环境而...

    jinghong
  • Python3网络爬虫(六):Python3使用Cookie-模拟登陆获取妹子联系方式

    运行平台:Windows Python版本:Python3.x IDE:Sublime text3 一、为什么要使用Cookie     Cookie,指某些...

    Jack_Cui
  • js对cookie的操作

    cookie是网站为了标识用户身份而存储在用户本地终端上的数据,一般这些数据都会进行加密,以防止数据篡改而造成用户信息泄露。cookie数据始终在同源的http...

    无邪Z
  • 爬虫之FileCookieJar

    人生不如戏
  • Flask cookie的使用

    在web项目中,设置cookie和session是基本必不可少的一个功能,而Flask设置cookie是使用make_response返回响应信息的时候设置的。...

    Devops海洋的渔夫
  • 雅虎军规第四天

    1、 压缩再压缩,一个HTM加载的时候图片的加载时间真的很长很长,所以能不使用图片就不要使用,能压缩绝对要压缩,图标什么的都使用字体图标。

    wade
  • 【XSS】利用XSS窃取用户Cookie

    XSS的用途之一就是窃取用户的cookie,攻击者利用XSS在网页中插入恶意脚本,一旦用户访问该网页,cookie就会自动地发送到攻击者的服务器中去。

    一名白帽的成长史
  • Cookie的写入和读取的过程

    对于一个普通的网站进行分析查看:服务器返回个浏览器端的cookie和这个cookie到期到的事件

    静心物语313

扫码关注云+社区

领取腾讯云代金券