首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

cookie操作原生js

Cookie 是一种在客户端存储数据的小型文本文件,它可以用于保存用户的登录状态、偏好设置等信息。在原生 JavaScript 中操作 Cookie 主要涉及到设置、读取和删除 Cookie。

基础概念

  • Cookie: 存储在用户浏览器上的小型文本文件,用于保存用户会话信息。
  • Name/Value Pair: Cookie 由键值对组成,每个键值对表示一个特定的信息。
  • Expires/Max-Age: 指定 Cookie 的有效期。
  • Path: 定义了 Cookie 在服务器上的有效路径。
  • Domain: 定义了 Cookie 可以被哪些域访问。
  • Secure: 标记指示浏览器只能通过 HTTPS 协议发送 Cookie。
  • HttpOnly: 防止 JavaScript 访问 Cookie,增加安全性。

优势

  1. 持久化存储: 可以设置过期时间,使得数据可以在浏览器关闭后仍然保留。
  2. 跨页面共享: 同源页面之间可以共享 Cookie。
  3. 服务器与客户端通信: 服务器可以设置 Cookie,客户端可以通过请求头将其发送回服务器。

类型

  • 会话 Cookie: 存储在内存中,浏览器关闭后即消失。
  • 持久 Cookie: 设置了过期时间,即使浏览器关闭也会保存在硬盘上。

应用场景

  • 用户认证: 保存用户的登录状态。
  • 个性化体验: 记录用户的偏好设置。
  • 跟踪用户行为: 分析用户的浏览习惯。

操作示例

设置 Cookie

代码语言:txt
复制
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 使用示例
setCookie('username', 'JohnDoe', 7); // 设置一个7天后过期的 Cookie

读取 Cookie

代码语言:txt
复制
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 使用示例
const username = getCookie('username'); // 获取 Cookie 值
console.log(username); // 输出: JohnDoe

删除 Cookie

代码语言:txt
复制
function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

// 使用示例
eraseCookie('username'); // 删除名为 username 的 Cookie

可能遇到的问题及解决方法

1. Cookie 不生效

  • 检查路径: 确保设置 Cookie 时的路径与当前页面路径匹配。
  • 检查域名: 如果设置了域名,确保当前页面属于该域名或其子域名。
  • 检查浏览器设置: 用户可能禁用了 Cookie 或设置了隐私保护。

2. 安全性问题

  • 使用 HttpOnly: 对于敏感信息,设置 HttpOnly 属性防止 XSS 攻击。
  • 使用 Secure: 在 HTTPS 环境下,设置 Secure 属性确保 Cookie 只通过安全连接传输。

3. 大小限制

  • 注意大小: 单个 Cookie 最大不能超过 4KB,且一个域名下的所有 Cookie 总大小有限制。

通过以上方法,可以在原生 JavaScript 中有效地操作 Cookie,并解决常见的相关问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS操作cookie

一、 Cookie 本篇文章主要讲述对cookie的操作,如 设置、读取、检查、删除 。 首先了解下cookie的基本知识: 关于cookie Cookie,有时也用其复数形式 Cookies。...二、 操作cookie 大致了解cookie后,发现cookie其实挺重要的,例如项目里面前后端交互,很多就是使用cookie来进行校验的。...此时我们可以在 util 下新建 cookie.js 文件。 2. 设置cookie 这类使用场景较多,例如登录或将部分信息存储到cookie等场景都会用到。...清除cookie 在进行退出登录等操作时,一般我们需要将 cookie 进行清除,操作比较简单,接收到要清除的 cookie 名后操作即可,如下: // 清除cookie export function...引入挂载 在 main.js 中操作: // ... import Vue from 'vue' // 引入 import { setCookie, getCookie, checkCookie, clearCookie

9.9K30
  • JS-Cookie操作

    二、 操作cookie 大致了解cookie后,发现cookie其实挺重要的,例如项目里面前后端交互,很多就是使用cookie来进行校验的。...此时我们可以在 util 下新建 cookie.js 文件。 2. 设置cookie 这类使用场景较多,例如登录或将部分信息存储到cookie等场景都会用到。...清除cookie 在进行退出登录等操作时,一般我们需要将 cookie 进行清除,操作比较简单,接收到要清除的 cookie 名后操作即可,如下: // 清除cookie export function...引入挂载 在 main.js 中操作: // ... import Vue from 'vue' // 引入 import { setCookie, getCookie, checkCookie, clearCookie...总结下: 新建 cookie.js 文件 写几个操作 cookie 方法,模块打出 全局引入(main.js 挂载到 Vue)上,或者在组件中局部引入 在合适的场景下合理调用即可。

    6.6K10

    web_js操作cookie

    一、cookie概念 w3school: cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。 js的角度: cookie 就是一些字符串信息。...默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。若想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。...三、基础用法 1、cookie的存取操作   document.cookie = 'myname=myvalue' 'myname’表示 cookie 名称,'myvalue’表示这个名称对应的值。...假设 cookie 名称并不存在,那么就是创建一个新的 cookie;如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ,重复使用这个方法即可。...2、cookie的读取操作 function getCookie(c_name){     if (document.cookie.length>0){  //先查询cookie是否为空,为空就return

    4.2K30

    js对cookie的操作

    对cookie不仅浏览器端可以进行操作,服务器端也可以进行操作,在这里只说一下浏览器端对于cookie的存取及删除操作。...添加cookie 在说操作之前,首先需要了解一下cookie是如何存储的,我们随便打开一个网站,在控制台输入document.cookie ?...我们发现cookie的存储方式是key=value; key=value的形式存储的,这里面全都是在有效期内的cookie。...了解了存储方式,我们就可以进行set操作了: let setCookie=(key, value, days) =>{ let now = new Date(); let expires...获取cookie值 上面已经说过了document中存储cookie的形式了,而且过期的cookie不会出现在document.cookie中,这样我们在获取的时候只需要将其进行格式化即可: let getCookie

    6.7K30

    Selenium提高:JS操作和cookie处理

    调用JavaScript: 执行JS一般由两种场景: 一种是在页面上直接执行JS 另一种是在某个已经定位的元素上执行JS 隐藏百度一下按钮: 弹出新窗口的情况: 在编写自动化程序的时候,会遇到弹出新窗口的情况...控制浏览器滚动条: 百度滚动条: Cookie处理 添加一个cookie:遍历所有cookie 输出结果: 获取对象的属性: 验证码问题: 对于web应用来说...记录cookie: 通过向浏览器添加cookie可以绕过登录的验证码,这是很有趣的一种解决方案。...使用cookie进行登录的难点,是如何获得用户名和密码的name,如果找不到name,就没办法继续操作。可以通过get_cookies()来获取登录的cookie信息。...滑块模拟拖动: 可使用之前说的操作鼠标事件的方法,actionchines来进行滑块拖动操作,这个不详细说了,可以看我关于滑块的文章 https://blog.csdn.net/weixin_43582101

    3.2K20

    js中的操作cookie的方法

    document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; 02 原生js操作cookie...在 JavaScript 中, 可以使用以下代码来读取 cookie: var x = document.cookie; cookie 的操作,添加,修改,删除等,没有提供对应的方法,需要自己去处理document.cookie...> 下面我们来看下使用jQuery Cookie是如何操作Cookie的: //创建一个Cookie,属性默认 $.cookie('password', '123456'); //创建一个Cookie,...,其中提供了许多操作Cookie的方法: //创建一个Cookie,属性默认 Cookies.set('password', '123456'); //创建一个Cookie,设置属性:有效天数,path...总结: jQuery Cookie、js-cookie的使用方法,两者的使用非常类似,大家也可以根据自己的喜欢来选择,无论哪种,都会比原生的js要方便。

    5.2K40

    前端 js 操作 Cookie 详细介绍与案例

    过期时间:Cookie可以设置一个过期时间,以指定Cookie的有效期限。一旦超过该时间,浏览器将不再发送该Cookie。...1.2 Cookie的工作流程服务器发送一个包含Cookie的HTTP响应头给浏览器,响应头中包含了名称、值和其他相关信息。浏览器接收到响应后,会将Cookie存储在本地的Cookie存储中。...以下是一些减少Cookie风险的最佳实践:最小化Cookie的数据量:只存储必要的信息在Cookie中,避免存储敏感或不必要的数据。仅将标识用户会话或授权令牌等必要的信息存储在Cookie中。...定期审查和清理Cookie:定期审查应用程序中使用的Cookie,确保不再需要的Cookie及时删除。及时清理无效或过期的Cookie,减少不必要的风险。...3 实战操作3.1 设置 Cookiefunction setCookie(name, value, expires, path, domain, secure) { let cookieString

    65400

    工具库用久了,你还会原生操作 Cookie 吗?

    对个人来说,各种工具库和框架用起来简直不要太爽,再也不用哼哧哼哧地啃那些原生的操作方法了,既解放了脑力,又多出了摸鱼的时间,还不用考虑方法的准确性……一箭多雕的买卖简直是太划算了!...今天有测试组的同事找我给他们写一个记住密码的脚本,因为考虑到功能简单,没必要引入工具库,就使用原生操作来实现,结果,我竟然写地磕磕绊绊,中途还不得不上网查资料。就这么一个简单的实现,何至于此啊!?...Cookie 的操作 关于 Cookie 的相关概念,若有需要,可查看 这里 和 这里。...设置则为持久性 Cookie,缺省则为会话期 Cookie。...} 删除 Cookie 删除 Cookie 只需要将其过期时间expires 设为过去的时间即可,也可以通过设置 max-age 为 0 或 -1 来删除 Cookie: function removeCookieItem

    25010

    cookie操作

    值的存储 cookie存储在客户端的浏览器 一般会限制存储cookie的个数为 20个 并且单个cookie保存值的大小不能超过4kb 存储在浏览器上为明文存储 所以不安全 二、设置 方法...名 value cookie值 domain 提交cookie时匹配的域名 path 提交cookie时匹配的路径 expires cookie的有效期,可以是时间戳整数、时间元组或者datetime类型...操作后,并不是立即删除了浏览器中的cookie,而是给cookie值置空,并改变其有效期使其失效。...真正的删除cookie是由浏览器去清理的 五、安全Cookie 说明 Cookie是存储在客户端浏览器中的,很容易被篡改。...Tornado提供了一种对Cookie进行简易加密签名的方法来防止Cookie被恶意篡改 使用安全Cookie需要为应用配置一个用来给Cookie进行混淆的秘钥cookie_secret,将其传递给Application

    48510
    领券