Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具

Cookie

作者头像
jinghong
发布于 2020-05-09 07:28:21
发布于 2020-05-09 07:28:21
1.3K00
代码可运行
举报
文章被收录于专栏:前端开发0202前端开发0202
运行总次数:0
代码可运行

什么是cookie

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

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

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

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

cookie作用:

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

cookie生命周期:

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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属性即可(如下)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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封装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * @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数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location.hash = 要添加的数据;

获取hash数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//在js中没有专门获取hash数据的函数,因此只能自寻方法这里用substring()函数截取
console.log(window.location.hash.substring(1))  //从索引为1的字符串开始截取
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-04-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
cookie
window.onload= function () { // document.cookie='名称=值;expires='+时间; var date=new Date(); date.setDate(date.getDate()+5); document.cookie='username=aaa;expires='+date.toGMTString(); docu
河湾欢儿
2018/09/06
1.1K0
Jquery基础(六) js方法清空cookie的各种方法
1,要清空浏览器的所有cookies, 2,要清空某网站的cookies,  //csdn.net的所有cookies
Java架构师必看
2021/05/31
8.1K0
cookie
Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘汰。
wade
2020/04/24
8350
JS 中 cookie 的使用
本文介绍了cookie的基本用法,包括如何创建、读取、设置和删除cookie,以及cookie的作用和安全性。同时,还介绍了如何通过JavaScript来操作cookie。
IT可乐
2018/01/04
6.2K0
客户端存储技术
为了提升用户的体验感,直接在客户端存储信息的需求也随之增加。无论是实现自动登录,个人偏好,换肤功能等,都能使用客户端存储来实现。本文将介绍Web客户端常见的几种存储方式,将结合实际应用场景进行分析,以及相关代码分享
小丞同学
2021/08/16
1.5K0
Cookie详解
我们知道,平时上网时都是使用无状态的HTTP协议传输出数据,这意味着客户端与服务端在数据传送完成后就会中断连接。这时我们就需要一个一直保持会话连接的机制。在session出现前,cookie就完全充当了这种角色。也就是,cookie的小量信息能帮助我们跟踪会话。一般该信息记录用户身份。
MickyInvQ
2020/09/27
1.2K0
cookie和本地存储的区别
cookie 基本概念 cookie非常小,限制在4kb左右,很多浏览器都限制一个站点最多保存20个cookie。 如果没有设置时间,则表示cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失,这种被称为会话cookie,它会被保存在内存中。 当设置了过期时间,浏览器会把cookie保存在硬盘中,关闭浏览器之后任然有效,直到超过设定的过期时间。 设置和获取cookie的方法 原生 // 使用js创建cookie document.cookie="username=John Doe
念念不忘
2019/03/29
2.5K0
一文搞明白Cookie、Session与Token
HTTP 协议是一种无状态协议,即每次服务端接收到客户端的请求时,都是一个全新的请求,服务器并不知道客户端的历史请求记录;Session 和 Cookie 的主要目的就是为了弥补 HTTP 的无状态特性
红客突击队
2022/09/30
1.6K0
一文搞明白Cookie、Session与Token
JavaScript Cookie
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
陈不成i
2021/07/21
5640
javascript设置cookie高级篇可跨域访问
跨域访问cookie (仅支持二级域名) 参考:javascript跨域设置cookie(二级域名)_xuebingnan的博客-CSDN博客
用户8099761
2023/05/11
7250
【HTTP】客户端识别与cookie机制
​ 然而,大多数产品都希望提供一个类“免责声明”的文档,然后主动管理该DNT。所以我们只能借助其他方式(这里常用的方式是第三方Cookie,见文档Cookie章节)去实现,下述主要描述了一些用以进行客户端识别的机制。
奋飛
2019/08/15
1.1K0
js中的操作cookie的方法
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
用户9914333
2022/07/22
5.2K0
PHP中的会话控制
了解HTTP(超文本传输协议)可以知道,它采用请求与响应的模式,最大的特点就是无连接无状态。 无连接:每次连接仅处理一个客户端的请求,得到服务器响应后,连接就结束了 无状态:每个请求都是独立的,服务器
小古哥
2018/03/08
1.7K0
PHP中的会话控制
js实用方法记录-简单cookie操作
js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称,值,-1,保存域); 设置cookie 测试代码:setCookie('test','hello') //保存session级的cookie到根域 测试代码:setCookie('test','hello',30,false) //保存30天且保存到当前全域名 /** * 设置cookie
易墨
2018/09/14
1.9K0
JS 如何创建、读取和删除cookie
Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可以检索以前保存的信息。
前端小智@大迁世界
2019/09/03
14K0
JS 如何创建、读取和删除cookie
关于 Cookie,了解这些就足够了
Cookie 是用户浏览器保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
皮小蛋
2020/03/02
1.8K0
Web项目开发实践,Cookie与Session机制(四)
Cookie的maxAge决定着Cookie的有效期,单位为秒(Second)。Cookie中通过getMaxAge()方法与setMaxAge(int maxAge)方法来读写maxAge属性。
用户1289394
2022/02/15
5340
Web项目开发实践,Cookie与Session机制(四)
电商---实现购物车功能
优点:不占用服务器资源,可以永远保存,不用考虑失效的问题 缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买。
周小董
2019/03/25
1.8K0
javascript操作cookie
在一些系统当中,需要用户去登录,等用户登录后,在这个系统的其他页面也需要能得知是哪个用户登录的,这时就需要向cookie里填入用户的信息,以方便在其他页面获取。下面来看一下代码
OECOM
2020/07/01
4560
关于Session与Cookie
有些时候技术群里面的群友会说一些涉及 Session 和 Cookie 的问题,但是通过他们的表述感觉其对两者并没有了解清楚,今天简单说明一下。
CoderStar
2022/08/24
3610
相关推荐
cookie
更多 >
LV.0
这个人很懒,什么都没有留下~
作者相关精选
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验