前端的cookie

程序员文章站 2022-06-21 23:32:29

前端的cookie先自己总结一下（课本的相关具体细节看后面）先提一下：一定不要在 cookie 中存储重要和敏感的数据。cookie 数据并非存储在一个安全环境中，其中包含的任何数据都可以被他人访问。数据持久化操作描述：数据持久化也叫数据本地化，是一种将数据长久的保存在客户端的操作作用：通过数据持久化操作，能够实现网站的登录效果，避免用户在网站页面间浏览的时候重复登录，也能实现快速登录，一段时间内保存用户的登录效果，提高页面访问速率类型：html5中提供了三种数据持久化操作cooki...

前端的cookie

先自己总结一下（课本的相关具体细节看后面）

先提一下：一定不要在 cookie 中存储重要和敏感的数据。cookie 数据并非存储在一个安全环境中，其中包含的任何数据都可以被他人访问。

数据持久化操作
- 描述：数据持久化也叫数据本地化，是一种将数据长久的保存在客户端的操作
- 作用：通过数据持久化操作，能够实现网站的登录效果，避免用户在网站页面间浏览的时候重复登录，也能实现快速登录，一段时间内保存用户的登录效果，提高页面访问速率
- 类型：html5中提供了三种数据持久化操作
  - cookie
  - localStorage( 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除)
  - sessionStorage(该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。)
cookie可以认为是一个记录了简单内容的文本文件 ,cookie是直接绑定在html页面之上的
- (可视)查看：（F12）控制台->application->左边栏菜单->cookie
- 操作：cookie的设置分为前端和后端设置（php）两种
- 前端：（要注意前端操作cookie的时候时间要用toGMTString()方法转换成标准时才行）
  - 写入cookie：document.cookie=“key=value;(保存这一条cookie的键和值);expires=过期时间戳”;=>一个日期（DATE）对象
  - 读取cookie:console.log(document.cookie);
  - 删除：document.cookie=“key=value;(保存这一条cookie的键和值);expires=当前时间戳+1”;(通过cookie自己的状态进行删除操作)
例子1(一个简单设置cookie)：

  <script>
        var expires = new Date(new Date().getTime() + 1000 * 1000).toGMTString();
        //console.log(expires);
        //距离1970年的毫秒数（在之前的js一到五章的博客中已经提过）
        //意思是这条cookie保存时间为当前时间的1000s之后,GMT改成标准时间
        document.cookie = 'username=astra;expires='+expires;
    </script>

例子2(如果设置了 cookie，将显示一个提示信息。如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：)

<head>
<script>
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
	}
	return "";
}
function checkCookie(){
	var user=getCookie("username");
	if (user!=""){
		alert("欢迎 " + user + " 再次访问");
	}
	else {
		user = prompt("请输入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
	
<body onload="checkCookie()"></body>

cookie细讲

1、限制
- cookie 是存在客户端计算机上的，每个域的 cookie 总数是有限的，当超过单个域名限制之后还要再设置 cookie，浏览器就会清除以前设置的 cookie
- 其实浏览器对于 cookie 的尺寸也有限制，如果超过了可能会被丢掉
2、构成（六块信息）（图片引用于JavaScript高级程序设计）
最后一个标志表示这个cookie只能通过SSL链接才能传输

域、路径、失效时间和 secure 标志都是服务器给浏览器的指示，以指定何时应该发送 cookie。这些参数并不会作为发送到服务器的 cookie 信息的一部分，只有名值对才会被发送

3、JS中的cookie
- 接口：BOM中的document.cookie属性（使用方法不同行为也会不同）
  - 获取属性值
    - 会返回当前页面可用的所有cookie字符串（一系列名值对）
  所有名字和值都是经过 URL 编码的，所以必须使用 ==decodeURIComponent()==来解码
  - 设置值:设置为一个新的 cookie 字符串,这个 cookie 字符串会被解释并添加到现有的 cookie 集合中不过不会覆盖原来的

document.cookie = "name=Nicholas";

理解：上面这段代码表示创建了一个叫 name 的 cookie，值为 Nicholas，没有设置其他信息值（比如时间），所以当浏览器关闭的时候，它就会被删除
其次，要注意一个点：最好每次设置 cookie 时都使用 encodeURI-
Component()

例如上面那个例子可以写一段这样的代码：

document.cookie = encodeURIComponent("name") + "=" +
encodeURIComponent("Nicholas");

读取写入和删除：可以看上面的总结和例子，删除的话
没有删除已有 cookie 的直接方法。所以，需要使用相同的路径、域和安全选项再次设置 cookie，并
将失效时间设置为过去的时间——《JavaScript高级程序设计》
4、子cookie
- 概念：子 cookie 是存放在单个 cookie 中的更小段的数据。也就是使用 cookie 值来存储多个名值对
- 获取：两个方法（遵循与获得 cookie 一样的基本步骤）
  - get(cookie 的名字，子 cookie 的名字):获取单个子cookie的值
  - 它其实就是调用 getAll() 获取所有的子 cookie，然后只返回所需的那一个
  - getAll()：获取所有子 cookie 并将它们放入一个对象中返回，对象的属性为子 cookie 的名称，对应值为子 cookie对应的值
- 设置：
  - (7个参数) set(cookie 名称、子 cookie 名称、子 cookie 值、可选的 cookie 失效日期或时间的 Date 对象、可选的 cookie 路径、可选的 cookie 域和可选的布尔 secure 标志)
所有的可选参数都是作用于cookie本身而非子cookie。为了在同一个cookie中存储多个子cookie，路径、域和secure标志必须一致
- （6个参数）setAll(cookie 名称、包含所有子 cookie 的对象、可选的 cookie 失效日期或时间的 Date 对象、可选的 cookie 路径、可选的 cookie 域和可选的布尔 secure 标志)
  - 为了确保确实是要保存的数据，使用了 hasOwnProperty() 方法，来确保只有实例属性被序列化到子 cookie 中
- 删除子cookie（3步）: (普通cookie是通过设置失效时间来删除，但是子cookie不可以这样)
  - 1、获取某个cookie的所有子cookie
  - 2、删除要删除的那个子cookie
  - 3、余下的子cookie的值保存为cookie的新值
  - 代码例子：

unset: function (name, subName, path, domain, secure){
var subcookies = this.getAll(name);
if (subcookies){
delete subcookies[subName];
this.setAll(name, subcookies, null, path, domain, secure);
}
},
unsetAll: function(name, path, domain, secure){
this.setAll(name, null, new Date(0), path, domain, secure);
}

//仅删除名为 name 的子 cookie
SubCookieUtil.unset("data", "name");
//删除整个 cookie
SubCookieUtil.unsetAll("data");

理解：1、 unset() 方法用于删除某个 cookie 中的单个子 cookie
2、 unsetAll() 方法用于删除整个 cookie

5、注意点
1、性能：由于所有的 cookie 都会由浏览器作为请求头发送，所以在 cookie 中存储大量信息会影响到特定域的
请求性能。尽管浏览器对 cookie 进行了大小限制，
不过最好还是尽可能在 cookie 中少存储信息，以避免影响性能
2、安全性：在开头已经提到不能存储重要数据以免泄露

本文地址：https://blog.csdn.net/Phoebe4/article/details/107571491

前端的cookie

前端的cookie

先自己总结一下（课本的相关具体细节看后面）

cookie细讲

SQL Server查看login所授予的具体权限

Mysql中decode函数的几种用法

React前端有钱途吗？《React+Redux前端开发实战》学起来

杭州成全国首个可凭支付宝健康码看病的城市

连接MySQL报错误代码 ERROR 1045时的解决方案

Win10运行红色警戒提示不兼容的解决方法

csrf攻击防范的方法（csrf攻击原理与解决技巧）

Linux环境(CentOS6.7 64位)下安装subversion1.9.5的方法

Nginx的优点

linux释放内存命令（linux top命令的用法详细详解）