JavaScript 学习笔记 - 9 JavaScript 和 cookie

最新推荐文章于 2024-07-20 23:54:17 发布

Helloworld188888

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量187

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_24951479/article/details/128298612

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

9.1 建立第一个 cookie

cookie 是一个具有特定格式的文本字符串：
cookieName=cookieValue;expires=expirationDateGMT;path=URLpath;domain=siteDomain
这个字符串的第一部分给 cookie 命名并给它赋值。这是 cookie 中唯一必须有的部分，字符串的其余部分都是可选的。接下来是 cookie 的过期日期（ expiration date），当到了这个日期，浏览器会自动删除这个 cookie。过期日期后面是一个 URL 路径，这允许在 cookie 中存储一个 URL。最后，可以在cookie 中存储一个域值。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>Set a cookie based on a form</title>
<script src="script01.js"></script>
</head>
<body>
<form id="cookieForm" action="#">
<h1>Enter your name: <input type="text" id="nameField"></h1>
</form>
</body>
</html>

window.addEventListener("load",nameFieldInit,false);
function nameFieldInit() {
var userName = "";
if (document.cookie != "") {
userName = document.cookie.split("=")[1];
}
document.getElementById("nameField").value = userName;
document.getElementById("nameField").onblur = setCookie;
document.getElementById("cookieForm").onsubmit = setCookie;
}
function setCookie() {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var userName = document.getElementById("nameField").value;
document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString();
document.getElementById("nameField").blur();
return false;
}

多个 cookie

可以在一个页面上设置多个 cookie，格式如下：
“cookieName1=cookieValue1;expires=expirationDateGMT1;path=sitePath1;domain=siteDomain1”;
“cookieName2=cookieValue2;expires=expirationDateGMT2;path=sitePath2;domain=siteDomain2”
同样，只有名称和值对是必须有的字段。split("; ")命令将多个 cookie 记录分隔为数组，各个 cookie 从零开始编号。注意，这个命令中分号后面有一个空格。 cookieArray[0]是多个 cookie 记录中的第一个 cookie， cookieArray[1]是下一个 cookie，以此类推。

9.2 读取 cookie

设置了 cookie 之后，需要获得它以便做某些有意义的事情。前一个示例在 cookie 中设置了文本字符串 Tom。

<!DOCTYPE html>
<html>
<head>
<title>I know your name!</title>
<script src="script02.js"></script>
</head>
<body>
<h1 id="nameField">&nbsp;</h1>
</body>
</html>

window.addEventListener("load",nameFieldInit,false);
function nameFieldInit() {
if (document.cookie != "") {
document.getElementById("nameField").innerHTML = "Hello, " + document.cookie.split("=")[1];
}
}

在这里插入图片描述

9.3 显示 cookie

在前一个示例中，我们读取了一个来自服务器的 cookie 的值。现在，我们看看如何编写一个脚本，让它读取来自你的服务器的所有 cookie，并且显示它们的名称和值。如果没有 cookie，脚本就显示 Thereare no cookies here

在这里插入图片描述

window.addEventListener("load",showCookies,false);
function showCookies() {
var outMsg = "";
if (document.cookie == "") {
outMsg = "There are no cookies here";
}
else {
var thisCookie = document.cookie.split("; ");
for (var i=0; i<thisCookie.length;i++) {
outMsg += "Cookie name is '" + thisCookie[i].split("=")[0];
outMsg += "', and the value is '" + thisCookie[i].split("=") [1] + "'<br>";
}
}
document.getElementById("cookieData").innerHTML = outMsg;
}

9.4 使用 cookie 作为计数器

因为 cookie 是持久性的，也就是说，它们可以跨 Web 服务器和浏览器之间的多次会话持久地存在，所以可以使用 cookie 存储特定用户访问某个页面的次数。但是，这并不是在许多网页上看到的页面计数器。因为 cookie 是与一个用户相关联的，所以只能记录这个用户的访问次数，不能使用 cookie存储所有用户访问这个页面的次数。

window.addEventListener("load",initPage,false);
function initPage() {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var hitCt = parseInt(cookieVal("pageHit"));
hitCt++;
document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString();
document.getElementById("pageHits").innerHTML = "You have visited this page " + hitCt + " times.";
}
function cookieVal(cookieName) {
var thisCookie = document.cookie.split("; ");
for (var i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1];
}
}
return 0;
}

在这里插入图片描述

9.5 删除 cookie

有时候，你希望删除 cookie 记录中的一个或多个 cookie。这非常容易，一种效果很好的技术是，将 cookie 的过期日期设置为过去的某个日期，这会让浏览器自动地删除它。

window.addEventListener("load",cookieDelete,false);
function cookieDelete() {
var cookieCt = 0;
if (document.cookie != "" && confirm ("Do you want to delete the cookies?")) {
var thisCookie = document.cookie.split("; ");
cookieCt = thisCookie.length;
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
for (var i=0; i<cookieCt; i++) {
var cookieName = thisCookie[i].split("=")[0];
document.cookie = cookieName + "=;expires=" + expireDate.toGMTString();
}
}
document.getElementById("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt;
}

在这里插入图片描述

9.6 处理多个 cookie

常常希望同时处理多个 cookie，如何读取多个 cookie 并且显示其中的信息。

window.addEventListener("load",initPage,false);
function initPage() {
var now = new Date();
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var hitCt = parseInt(cookieVal("pageHit"));
hitCt++;
var lastVisit = cookieVal("pageVisit");
if (lastVisit == 0) {
lastVisit = "";
}
document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString();
document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString();
var outMsg = "You have visited this page " + hitCt + " times.";
if (lastVisit != "") {
outMsg += "<br>Your last visit was " + lastVisit;
}
document.getElementById("cookieData").innerHTML = outMsg;
}
function cookieVal(cookieName) {
var thisCookie = document.cookie.split("; ");
for (var i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1];
}
}
return 0;
}

在这里插入图片描述

9.7 显示新内容提醒信息

可以使用 cookie 和 JavaScript 提醒经常访问站点的用户注意他们没看到过的内容。这会向访问你站点的用户提供更个性化的体验，让站点显得更智能、友好。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>New for You</title>
<link rel="stylesheet" href="script07.css">
<script src="script07.js"></script>
</head>
<body>
<p>Negrino and Smith's most recent books:</p>
<p id="New-20140601"><a href="http://www.javascriptworld.com">JavaScript:Visual QuickStart Guide,
➝ 9<sup>th </sup> Edition</a></p>
<p id="New-20130812"><a href="http://www.dreamweaverbook.com">Dreamweaver CC: Visual QuickStart
➝ Guide</a></p>
</body>
</html>

body {
background-color: #FFF;
}
p.newImg {
padding-left: 35px;
background-image: url(images/new.gif);
background-repeat: no-repeat;
}

window.addEventListener("load",initPage,false);
function initPage() {
var now = new Date();
var lastVisit = new Date(cookieVal("pageVisit"));
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString();
var allGrafs = document.getElementsByTagName("p");
for (var i=0; i<allGrafs.length; i++) {
if (allGrafs[i].id.indexOf("New-") != -1) {
newCheck(allGrafs[i],allGrafs[i].id.substring(4));
}
}
function newCheck(grafElement,dtString) {
var yyyy = parseInt(dtString.substring(0,4),10);
var mm = parseInt(dtString.substring(4,6),10);
var dd = parseInt(dtString.substring(6,8),10);
var lastChgd = new Date(yyyy,mm -1,dd);
if (lastChgd.getTime() > lastVisit.getTime()) {
grafElement.className += " newImg";
}
}
}
function cookieVal(cookieName) {
var thisCookie = document.cookie.split("; ");
for (var i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1];
}
}
return "1 January 1970";
}

Helloworld188888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习笔记 - 9 JavaScript 和 cookie

cookie 总是包含发送它的服务器的地址。 cookie 技术背后的本质是“识别”。可以把它看作 Web 上的 Caller ID，只是在形式方面有各种变化——每个使用 cookie 的 Web 站点向用户的浏览器授予某种形式的个性化 ID，这样在用户下一次访问这个站点时就能够识别出他。当用户再次访问以前向他传递过 cookie 的 Web 服务器时，服务器可以查询浏览器，了解这个用户是否拥有它的 cookie。如果是，服务器就可以获取原来传递的 cookie 中存储的信息。请记住， cookie
复制链接

扫一扫