javascript怎么实现cookie的操作-js教程-PHP中文网

首页

web前端

js教程

javascript怎么实现cookie的操作

青灯夜游

Sep 15, 2021 pm 06:36 PM

javascript

方法：1、用“document.cookie="名称=值;"”语句来设置cookie或者修改cookie值；2、用“document.cookie”语句获取cookie值；3、通过将有效时间“expires”设置为过期值来删除cookie。

javascript怎么实现cookie的操作

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

cookie 是存储于访问者的计算机中的变量，当用户访问了某个网站时，就可以通过 cookie 向访问者计算机上存储数据。之后，当用户在同一台计算机通过浏览器再次请求该页面时，会发送这个 cookie，因而可以使用 cookie 来识别用户。

1. 设置cookie

使用 cookie 来存储数据是通过设置 cookie 来实现的。每个 cookie 都是一个名/值对，名/值对用等号连接，并将该名/值对赋值给 document.cookie 即可。一次可以将多个名/值对赋给 document.cookie，并使用分号加空格隔开每个名/值对。

设置 cookie 的基本格式如下：

document.cookie = "名称1=值1[; 名称2=值2; …]";

登录后复制

设置 cookie 的示例如下：

document.cookie = "username=abc";
document.cookie = "age=23";
document.cookie = "username=abc; age=23";

登录后复制

需要注意的是，在 cookie 的名称或值中不能使用分号；和等号=等符号。如果想存入这些符号，需要使用 escape() 函数进行编码。例如：document.cookie="str="+escape("username=nch")，该代码等效于：document.cookie="str=username%3Dnch"，即等号被编码为%3D。当使用 escape() 编码后，在取出值以后需要使用 unescape() 进行解码才能得到原来的 cookie 值。

另外，使用上述格式设置的 cookie 中的值在用户计算机中存储时，是以网站域名形式来区分不同网站的数据，而且不同浏览器存放 cookie 的位置不一样，因此不同浏览器之间存储的 cookie 不可以相互访问。另外，同一个域名下存放的 cookie 的个数是有限制的，不同的浏览器对存放的个数限制不一样。而且，每个 cookie 存放的内容大小也是有限制的，不同的浏览器该大小限制也不一样。

2. 修改cookie值

如果要改变一个 cookie 值，只需对它重新赋值，例如：document.cookie="age=36";这样就可以修改前面设置的 age=23 的 cookie 值。

3. 获取cookie

通过 document.cookie 来获取当前网站下的 cookie 时，得到的是字符串形式的值，该值包含了当前网站下所有的 cookie。它会把所有的 cookie 通过一个分号+空格的形式串联起来。

要获取不同的 cookie 值，可以将这个包含了分号及空格的字符串使用 split() 方法按分号分隔转换为一个字符串数组，然后再对这个字符串数组进行遍历即可得到每个名/值对，对这个名/值对再次使用 split() 方法按等号分隔转换为一个包含名称和值的数组，就可以得到指定 cookie 名称的值了。

例如要获取 cookie 名为 age 的值的代码如下：

document.cookie = "username=abc; age=23";
var arr1 = document.cookie.split(&#39;;&#39;);
for(var i = 0; i < arr1.length; i++){
     var arr2 = arr1[i].split(&#39;=&#39;);
     if(arr2[0] == &#39;age&#39;){
         alert(arr2[1]);
     }
}

登录后复制

4. 设置cookie的有效时间

默认情况下，cookie 是临时存储的，即默认是存在内存的，并没有存储到硬盘中，所以存储的 cookie 在浏览器进程关闭后会自动销毁。如果想把 cookie 在计算机中保存一段时间或永久保存，则需要在设置 cookie 时对其设置一个有效时间，设置格式如下：

document.cookie = "名称=值;expires="+字符串格式的时间;

登录后复制

例如：

var oDate = new Date();
oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期
//设置cookie的有效时间，时间为字符串格式
document.cookie = &#39;username=abc;expires=&#39;+oDate.toGMTString();

登录后复制

5. 删除cookie

直接将 cookie 的有效时间设置成过去某个时间即可。例如：

var oDate = new Date();
oDate.setDate(oDate.getDate()-1);//访问页面的前一天
document.cookie = &#39;username=abc;expires=&#39;+oDate.toGMTString();

登录后复制

【例 1】使用 document 操作 cookie。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用cookie记住登录用户名</title>
<script>
     window.onload = function(){
         var oUsername = document.getElementById(&#39;username&#39;);
         var oLogin = document.getElementById(&#39;login&#39;);
         var oDel = document.getElementById(&#39;del&#39;);
         //判断用户是否曾经登录过
         if(getCookie(&#39;username&#39;)){
              oUsername.value = getCookie(&#39;username&#39;);
         }
         //定义一个函数来获取指定名称的cookie值：
         function getCookie(key){
              var arr1 = document.cookie.split(&#39;;&#39;);
              for(var i = 0; i < arr1.length; i++){
                  var arr2 = arr1[i].split(&#39;=&#39;);
                  if(arr2[0] == key){
                       return unescape(arr2[1]);//对编码后的内容进行解码
                  }           
              }
         }    
         //定义一个函数来设置cookie,同时设置cookie的有效时间
         function setCookie(key,value,t){
              var oDate = new Date();
              oDate.setDate(oDate.getDate()+t);
              //使用escape()对内容进行编码
              document.cookie = key+&#39;=&#39;+escape(value)+&#39;;expires=&#39;+oDate.toGMTString();         
         }    
         //定义一个函数移除cookie
         function removeCookie(key){
              setCookie(key,&#39;&#39;,-1);
         }
         oLogin.onclick = function(){
              alert(&#39;登录成功&#39;);
              //将输入的用户名存储在cookie中，且在登录5天后cookie过期
              setCookie(&#39;username&#39;,oUsername.value,5);
         }
         oDel.onclick = function(){
              removeCookie(&#39;username&#39;);
              oUsername.value = &#39;&#39;;//移除cookie后清空文本框内容
         }
     };
</script>
</head>
<body>
     <input type="text" id="username"/>
     <input type="button" value="登录" id="login"/>
     <input type="button" value="删除用户名cookie" id="del"/>
</body>
</html>

登录后复制

注：Firefox 和 IE 在本地只允许临时操作 cookie，关闭浏览器后无法获取 cookie。而 Chrome 则不允许在本地操作 cookie。将例 1 发布到 Web 服务器上后再访问它时，这些浏览器都可以操作 cookie。

下图所示是在 Chrome 浏览器中访问发布到 Tomcat Web 服务器上运行后分别为输入用户名后单击登录按钮和删除按钮的结果（Tomcat 服务器在本机，因而可以使用 localhost 作为域名来访问它）。

输入用户名后单击登录按钮，在单击删除用户名 cookie 按钮前关掉 Chrome 浏览器进程，然后再次打开 Chrome 访问例 1，可得到图 3 所示的结果，即用户名会自动显示在文本框中。如果单击删除用户名 cookie 按钮后关掉 Chrome 浏览器进程，然后再次打开 Chrome 访问例 1，则得到图 4 所示的结果，此时存储在 cookie 中的用户名已删掉，因而无法显示在文本框中。

【推荐学习：javascript高级教程】

以上是javascript怎么实现cookie的操作的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7683

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1286

PHP教程

1229

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数：要插入的新节点和参考节点（即新节点将要被插入的位置的节点）。

JavaScript和WebSocket：打造高效的实时图像处理系统 Dec 17, 2023 am 08:41 AM

JavaScript是一种广泛应用于Web开发的编程语言，而WebSocket则是一种用于实时通信的网络协议。结合二者的强大功能，我们可以打造一个高效的实时图像处理系统。本文将介绍如何利用JavaScript和WebSocket来实现这个系统，并提供具体的代码示例。首先，我们需要明确实时图像处理系统的需求和目标。假设我们有一个摄像头设备，可以采集实时的图像数

See all articles

javascript怎么实现cookie的操作

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题