iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现cookie的操作
  • 551
分享到

JavaScript实现cookie的操作

2024-04-02 19:04:59 551人浏览 八月长安
摘要

cookie 用于存储 WEB 页面的用户信息。 一、什么是 Cookie? Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时

cookie 用于存储 WEB 页面的用户信息。

一、什么是 Cookie?

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

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

Cookie 以名/值对形式存储,如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

二、创建Cookie

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

JavaScript 中,创建 cookie 如下所示:

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

创建 cookie 值的函数

首先,我们创建一个函数用于存储访问者的名字:

该函数设置了 cookie 名、cookie 值、cookie过期时间。

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; //cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。
}

调用方法:setCookie(cookie名称,cookie数值,过期时间(天))

setCookie('sex','男', 10);

三、读取 Cookie

document.cookie 属性看起来像一个普通的文本字符串,其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:

cookie1=value; cookie2=value;

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

var x = document.cookie;

读取 cookie 值的函数

然后,我们创建一个函数用户返回指定 cookie 的值:

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 "";
}

调用方法:getCookie(cookie名称)

getCookie('username');

四、修改 Cookie

在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:旧的 cookie 将被覆盖。

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

五、删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可。如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

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

注意,当您删除时不必指定 cookie 的值。

移除 cookie函数

function removeCookie(key) {
    setCookie(key, '', -1);  //cookie的过期时间设为昨天
}

调用方法:removeCookie(cookie名称)

removeCookie('age');

六、判断浏览器是否启用cookie

var cookiesEnabled = (function(){
  var id = new Date().getTime();
  document.cookie =   '__cookieprobe='  + id + ';path=/';
  return (document.cookie.indexOf(id) !== -1);

})();

到此这篇关于JavaScript操作Cookie的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现cookie的操作

本文链接: https://www.lsjlt.com/news/149611.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现cookie的操作
    cookie 用于存储 web 页面的用户信息。 一、什么是 Cookie? Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时...
    99+
    2024-04-02
  • JavaScript如何实现cookie的操作
    这篇“JavaScript如何实现cookie的操作”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript如何实...
    99+
    2023-06-30
  • javascript如何实现cookie操作
    小编给大家分享一下javascript如何实现cookie操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • Django操作cookie的实现
    前言 cookie:在网站中,http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这...
    99+
    2024-04-02
  • Cookie的读写操作怎么实现
    本篇内容主要讲解“Cookie的读写操作怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Cookie的读写操作怎么实现”吧!  一、Cookie的出现  浏览器和服务器之间的通信少不了HT...
    99+
    2023-06-04
  • JavaScript 中怎么对Cookie进行操作
    本篇文章为大家展示了JavaScript 中怎么对Cookie进行操作,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Cookie 只是存储在计算机浏览器中的小型文本...
    99+
    2024-04-02
  • Postman中cookie的操作
    在接口测试中,某些接口的调用,需要带入已有Cookie,比如有些接口需要登陆后才能访问。 Postman接口请求使用Cookie有如下两种方式: 直接在头域中添加Cookie头域,适用于已经知道请求所用Cookie数据的情况。 使用Post...
    99+
    2023-10-25
    postman 测试工具
  • ASP.NET对Cookie的操作
    概述 Cookie用来保存客户浏览器请求服务器页面的请求信息。 我们可以存放非敏感的用户信息,保存时间可以根据需要设置。如果没有设置Cookie失效日期,它的生命周期保存到关闭浏览器...
    99+
    2024-04-02
  • JavaScript的BOM操作怎么实现
    今天小编给大家分享一下JavaScript的BOM操作怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。window对象...
    99+
    2023-06-29
  • JS 操作Cookie详解
    来源:小毅博客Cookies,有些人喜欢它们,有些人憎恨它们。但是,很少有人真正知道如何使用它们。现在你可以成为少数人中的成员-可以自傲的Cookie 大师。-->如果你象作者一样记性不好,那么你可能根本记不住人们的名字。我遇到人时,多...
    99+
    2023-06-03
  • laravel操作session和cookie
    一:操作session 1:session配置 Session 的配置文件存储在config/session.php中,配置参数有: (1):配置session驱动 'driver' => env('SESSION_DRIVER',...
    99+
    2023-09-27
    laravel php Powered by 金山文档
  • PHP中的COOKIE操作指南
    PHP作为一种非常常用的后端开发语言,其操作COOKIE的功能也非常强大。本文将为大家提供一份PHP中COOKIE操作的指南,帮助大家熟练掌握该功能。一、什么是COOKIE在了解COOKIE的操作前,我们需要先了解什么是COOKIE。COO...
    99+
    2023-05-21
    PHP cookie 操作指南
  • JavaScript实现表单元素的操作
    目录一、forms[]; Form 表单对象1、属性2、方法3、事件二、表单元素1、输入标记2、输入类控件的type可选值3、elements[]; Element 表单元素对象4、...
    99+
    2024-04-02
  • js利用cookie实现记住用户页面操作
    前言 开发过程中,有时候会遇到一些类似需求,比如记住用户在浏览器层面所做的操作。之前做过一个功能,当时使用了一个拖拽插件展示一个类似九宫格的报表图,每个图形都可以显示和隐藏,如果用户...
    99+
    2024-04-02
  • JavaScript中cookie操作对象的应用方法有哪些
    本篇内容主要讲解“JavaScript中cookie操作对象的应用方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中cookie操作...
    99+
    2024-04-02
  • javascript怎么实现删除操作
    在Web应用程序中,删除数据是一个非常常见的操作。无论是删除一个记录,还是删除一个文件或目录,我们都需要一个能够安全、简单地执行这个操作的解决方案。而使用javascript语言可以实现这个功能。一、删除确认在删除之前,通常需要让用户确认他...
    99+
    2023-05-14
  • node+express如何操作cookie
    这篇文章主要介绍了node+express如何操作cookie的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇node+express如何操作cookie文章都会有所收获,下面我...
    99+
    2024-04-02
  • js cookie操作的示例分析
    这篇文章主要介绍了js cookie操作的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。cookieObj=function(){}cookieObj.prototy...
    99+
    2023-06-03
  • JavaScript中如何实现DOM操作
    这篇文章主要为大家展示了“JavaScript中如何实现DOM操作”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何实现DOM操作”这篇文...
    99+
    2024-04-02
  • JavaScript如何实现打印操作
    这篇文章给大家分享的是有关JavaScript如何实现打印操作的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在JavaScript中,可以使用Window对象的print()方法来实现打印操作,语法格式“wind...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作