操作document.cookie存储和读取Cookies

简介: 操作document.cookie存储和读取Cookies

介绍

在Web开发中,Cookies(Cookie)是一种在客户端存储信息的方式,它允许网站在用户的计算机上存储少量数据,并在需要时进行读取。Cookies通常用于记录用户的状态信息、会话信息或其他用户相关的信息。本文将详细介绍如何使用JavaScript中的document.cookie对象来进行Cookies的存储和读取操作。

Cookies基本概念

Cookies是服务器发送到用户浏览器并保存在本地的数据,它可以在客户端存储多个键值对,并且可以设置过期时间。Cookies通常被用于跟踪用户的会话状态、记录用户的偏好设置等。每个Cookie都有一个名称、一个值以及相关的可选属性(如过期时间、路径、域名等)。

操作Cookies的方法

1. 设置Cookie

可以通过document.cookie属性来设置Cookie。以下是设置Cookie的基本语法:

document.cookie = "cookieName=cookieValue; expires=expirationTime; path=/; domain=example.com; secure";
  • cookieName:Cookie的名称。
  • cookieValue:Cookie的值。
  • expires:Cookie的过期时间,格式为GMT时间字符串。如果不设置expires属性,则Cookie是会话Cookie,关闭浏览器时会被删除。
  • path:可选,指定Cookie的路径,默认为当前页面路径。
  • domain:可选,指定Cookie的域名。
  • secure:可选,布尔值,指定是否只在HTTPS连接中传输Cookie。

示例代码如下,演示如何设置一个有效期为7天的Cookie:

function setCookie(cookieName, cookieValue, daysToExpire) {
    var expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + daysToExpire);
    var expires = "; expires=" + expirationDate.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + expires + "; path=/";
}
// 调用示例
setCookie("username", "john_doe", 7);
2. 读取Cookie

可以通过document.cookie属性读取存储在客户端的所有Cookie。需要注意的是,document.cookie返回的是一个包含所有Cookie的字符串,格式为键值对的形式,以分号和空格分隔。

function getCookie(cookieName) {
    var name = cookieName + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var cookieArray = decodedCookie.split(';');
    for(var i = 0; i < cookieArray.length; i++) {
        var cookie = cookieArray[i];
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1);
        }
        if (cookie.indexOf(name) === 0) {
            return cookie.substring(name.length, cookie.length);
        }
    }
    return "";
}
// 调用示例
var username = getCookie("username");
console.log("Username from cookie: " + username);
3. 删除Cookie

要删除一个Cookie,可以通过设置Cookie的过期时间为过去的时间来实现。示例代码如下:

function deleteCookie(cookieName) {
    document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}
// 调用示例
deleteCookie("username");

注意事项

  • 安全性:敏感信息不应该存储在Cookie中,因为Cookie可以在客户端被访问和修改。
  • 大小限制:单个Cookie的大小限制通常为4KB。
  • 跨域问题:Cookie的域名和路径属性限制了哪些页面可以访问Cookie。

总结

本文介绍了如何使用JavaScript中的document.cookie对象来操作Cookies,包括设置、读取和删除Cookie的方法,并提供了相应的示例代码。通过掌握Cookies的基本操作,开发者能够更好地利用Cookies来存储和管理客户端的信息,从而提升Web应用的用户体验和功能性。

相关文章
|
7月前
|
存储 Web App开发 JSON
存储界的cookie、本地存储、会话存储
存储界的cookie、本地存储、会话存储
Web存储—获取Cookie
Web存储—获取Cookie
|
存储 编解码 缓存
Web存储—本地存储Cookie
Web存储—本地存储Cookie
|
存储
83分布式电商项目 - Cookie存储购物车
83分布式电商项目 - Cookie存储购物车
45 0
|
存储 移动开发 前端开发
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
写在前面:前端开发的时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage ,这是大家都知道的。本文的主要内容就是针对这三者的存放、获取,区别、应用场景。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 使用方式:很多文档都是说了一大堆,后面用法都没有说,先要学会怎么用,不然后面的都是扯淡,所以这里我先把使用方式弄出来。 cookie:保存cookie值: var dataCooki
326 0
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
|
存储 编解码 JSON
解决浏览器存储问题,不得不了解的cookie,localStorage和sessionStorage
要说浏览器存储的方式,我们听到最多的莫过于就是 cookie , localStorage 和 sessionStorage 了。那这三者之前有什么区别, cookie 与 session 、 sessionId 又有什么关系呢?接下来我们一起来了解一下吧!
解决浏览器存储问题,不得不了解的cookie,localStorage和sessionStorage
|
存储 SQL JSON
再谈浏览器存储之 localStorage 和 cookie
WEB 项目的开发,不可避免的要设计存储,这里所说的主要是浏览器存储。之前在文章《WEB 本地存储:localStorage、Web SQL Database、IndexedDB》介绍过浏览器存储。本文之所有再谈浏览器存储,是希望从更加细致的角度出发,并分享存储相关的方法集合。
269 0
|
存储 iOS开发
iOS wkwebview嵌入优酷视频,显示“请允许cookie存储”解决方法
iOS wkwebview嵌入优酷视频,显示“请允许cookie存储”解决方法
613 0
|
存储 JSON C#
在Cookie中存储对象
做项目过程中,用户登陆之后,需要将用户的信息存到Cookie中,但因为Cookie中只能存储字符串,所以想到了先把用户实体序列化成Json串,存储在Cookie中,用到的时候再拿出来反序列化。
|
存储 安全 数据安全/隐私保护
cookie是指web浏览器存储的少量数据,该数据会在每次请求一个相关的URL时自动传到服务器中(转)
  基本概念:cookie是指web浏览器存储的少量数据,该数据会在每次请求一个相关的URL时自动传到服务器中。   以博客园为例,我们看看cookie有哪些属性:   1、Name:cookie的名称;   2、Value:cookie名称对应的值;   3、Domain:设置cookie作用域。
1093 0