JavaScript cookie基础

68 阅读 0 评论 45 点赞

我是靠谱客的博主单薄煎蛋，最近开发中收集的这篇文章主要介绍JavaScript cookie基础，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么是Cookie?

Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以键值对（key=value）形式存储，例如：username=tigerto
当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

Cookie具有不可跨域名性：浏览器访问Google只会携带Google的Cookie，访问百度只会携带百度的Cookie。这一点由客户端管理的，也就是浏览器能保证不可跨域名性。例如查看Cookie时候是按域名划分的（下文某图）。

JavaScript创建Cookie

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

document.cookie="username=tigerto";

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=May 07 2017 15:30:00 GMT";

当将expires设置为当前时间为准的以前时间就可以删除cookie，例如：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

可以不用指定cookie值。
务必牢记，名称和值中都不能包含空格或者如下的字符：

[ ] ( ) = , " / ? @ : ;

JavaScript读取Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

Cookie实例

为了方便起见，代码只设置key为username的cookie。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookieTest</title>
</head>
<body onload="checkCookie()">
<script>
function getCookie() {
var cookies = document.cookie;
var arr_cookie = cookies.split(';');
for(var i=0; i<arr_cookie.length; i++){
var cookie = arr_cookie[i].trim();
if(cookie.indexOf("username=") == 0){
return cookie.substring(("username=").length,cookie.length);
}
}
return "";
}
function setCookie() {
var cookieValue=document.getElementById("t_username").value;
<!--最开始忘了加".value",浪费好长时间排除错误......-->
var expireHours=document.getElementById("t_expireHours").value;
var d = new Date();
d.setTime(d.getTime()+(expireHours*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie="username="+cookieValue+"; "+expires;
alert("set cookie success")
}
function checkCookie(){
var user = getCookie("username");
if(user != ""){
window.alert("username:"+user);
}else{
window.alert("cookie username not exists");
}
}
</script>
username:<input id="t_username" type="text">
expireHour:<input id="t_expireHours" type="text">
<hr>
<button onclick="setCookie()">set username's Cookie</button>
</body>
</html>

效果：
step1：设置cookie

step2：查看浏览器中的cookie

这里写图片描述

找到本测试网页的cookie

这里写图片描述
可以看到，key为username，value为tigeryo，过期时间为一小时的cookie成功建立了起来，并存储在本地。
update：这个存储路径有误，应该是/web而不是/web/js。原因是我把这个页面发在了/web/js下…失误失误。如果用户访问的任何页面匹配了cookie中的路径和域名，那么浏览器将会重新将这个cookie发回给服务器。