JavaScript Cookie 基础教程：设置、读取与删除详解

JavaScript Cookie 基础教程：设置、读取与删除详解

本文通过具体实例解析 JavaScript 中 Cookie 的使用方法，供读者参考学习。

Cookie 的概念与特点

一、什么是 Cookie？

Cookie 是网页用于保存信息的一种机制，常用于实现自动登录、记住用户名等功能。

二、Cookie 的主要特点

同一网站下的所有页面共享同一套 Cookie 数据。

Cookie 在数量和存储大小上存在限制。

Cookie 可以设置过期时间，超时后自动失效。

Cookie 的具体使用方法

三、Cookie 的具体使用方法

通过 document.cookie 属性即可写入 Cookie。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>cookie基础</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
document.cookie = 'username=abc';
document.cookie = 'password=123';
document.cookie = 'email=abcdef@123.com';
</script>

在浏览器中查看 Cookie 可以发现，新定义的 Cookie 并不会覆盖原有数据，而是以键值对形式追加。

若未设置过期时间，关闭浏览器后 Cookie 将被清空。要设置有效期，需使用 expires 属性，通常结合 Date 对象使用。

var d = new Date();
d.setTime(d.getTime() + 1 * 3600 * 1000);
document.cookie = 'username=abc; expires=' + d.toGMTString();

通过火狐浏览器可查看，username 的过期时间设定为当前时间之后 1 小时。

最后，对获取 Cookie 的方法进行封装处理：

function setCookie(name,value,hours){ 
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}

掌握设置方法后，接下来介绍如何读取 Cookie。

首先观察 Cookie 内容的类型：

document.cookie = 'username=abc';
document.cookie = 'password=123';
document.cookie = 'email=abcdef@123.com';
typeof document.cookie; //string
alert(document.cookie); //'username=abc; password=123; email=abcdef@123.com'

获取到的是一串字符串，需注意每个分号（;）后跟随一个空格。

为提取具体数值，参考以下代码实现：

function getCookie(name){ 
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split('=');
 if(temp[0] == name){
  return temp[1];
 }
 }
 return '';
}

除设置和获取外，还可删除 Cookie。例如网站常见的“清除用户名”功能，即通过删除 Cookie 实现。

删除 Cookie 的方法很简单，只需将过期时间设置为过去的时间即可。

function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

最终，将设置、获取和删除 Cookie 的功能封装至 cookie.js 文件中。

function setCookie(name,value,hours){ 
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}
function getCookie(name){ 
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split('=');
 if(temp[0] == name){
  return temp[1];
 }
 }
 return '';
}
function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

附：补充一个关于 Cookie 的基础应用：JavaScript 记录用户名。

更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《JavaScript 中 json 操作技巧总结》、《JavaScript 切换特效与技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 动画特效与技巧汇总》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》

希望本文所述对大家 JavaScript 程序设计有所帮助。