浏览器实现cookie的操作详解!!!推荐新手观看
发布于 3 年前 作者 jianggang 5222 次浏览 来自 分享

博客主页:https://blog.csdn.net/weixin_53893220?spm=1001.2101.3001.5343

本文基于js文档简单介绍了什么是cookie,浏览器是如何获取cookie并存储,等到加载时获取的,有助于新手了解cookie的相关操作

JavaScript Cookies

cookie介绍:

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后,连接被关闭,服务器会__忘记用户的一切__。

Cookie 是为了解决“如何记住用户信息”而发明的:

  • 当用户访问网页时,他的名字可以存储在 cookie 中。
  • 下次用户访问该页面时,cookie 会“记住”他的名字

Cookie 保存在名称值对中,如:

username = Bill Gates

当浏览器从服务器请求一个网页时,将属于__该页的 cookie 添加到该请求中__。这样服务器就获得了必要的数据来“记住”用户的信息。

创建 cookie:

document.cookie = "username=Bill Gates";

通过 path 参数,您可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

document.cookie 会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2=value; cookie3=value;

删除cookie:

直接把 expires 参数设置为过去的日期即可://即expires为cookie过期的时间

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。

cookie过程详解:

下面代码出现的操作cookie的三个函数作用:

checkCookie()//加载该页面时运行该函数,检查本地浏览器记录有无cookie

setCookie()//没有的话就设置cookie

getCookie()//获取cookie中的名称

出现的js自带方法为:

getTime()//返回距 1970 年 1 月 1 日之间的毫秒数。

setTime()//以毫秒设置 Date 对象。

toUTCString()//可根据世界时 (UTC) 把 Date 对象转换为__世界时__字符串,并返回结果。

split(";")//将字符串以;为间隔,分割成多个字符串,返回一个字符串数组

charAt(0)//返回数组下标为0处的字符

substring(1)//切割出从下标为1开始的字符串,第二个参数为切割到哪个位置,即下标

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));//为d设置一个形式为一串数字的cookie过期时间
    var expires = "expires="+d.toUTCString();//转化为世界时
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";//我们要的cookie主体
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');//分割记录中已存入的cookie,如果有的话
    for(var i = 0; i < ca.length; i++) {//有三个,cname=cvalue;expires=~~~;path=/
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);//从下标为1开始,目的是清除字符串开头带有的空格
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);//返回cvalue
         }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");//该字符串可随意设置,容易理解即可
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

觉得该篇文章有用的请不要忘记忘记点击右下角的大拇指~

2 回复

左下角大拇指)

后端常用的cookie技术~~~(虽然我没用js搞过)

回到顶部