当前位置： 移动技术网 > IT编程>网页制作>Html5 > 前端的cookie

前端的cookie

2020年07月26日  | 移动技术网IT编程  | 我要评论

前端的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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网